tiltShift.js

A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome & Safari 6.

See credits at bottom of page for Photograpger link

download

Download here or go to github. Released under GPL

how to use

Call the plugin on any collection of images you want by adding the following jQuery:


            jQuery(document).ready(function() {

                 $('.tiltshift').tiltShift();

            });

Parameters on each image must be set using the HTML5 data attributes, like this:

<img src="url" class="tiltshift" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y">

The attributes will control various variables that influence the tiltshift effect.

-position (0-100), defines the point of focus. 66 would be two thirds of the way in.
-blur (0-?), the blur radius in pixels. 1 or 2 are usually good numbers.
-focus (0-100), the amount of area that is in focus. 10 would mean one tenth of the image is sharp.
-falloff (0-100), the amount of area between complete focus and complete blur. The lower the value, the “tighter” the fade.
-direction (“x”, “y”, or 0-360), the direction of the effect with zero at right.

notes

As previously stated, currently only supported by Chrome & Safari 6. CSS3 filters are not widely supported, and Firefox/Mozilla to my knowledge only support SVG's for it's mask property.
Wraps a DIV around the IMG tag, so you may want to apply to same styling attributes to the selector '.tiltshift-wrap'
Pull requests? Yes, happy to make this more rigid across different browsers.

authors

tiltShift.js is brought to you by Noel Tock, a WordPress, front-end and startup dude. I also blog from time to time. Follow me on Twitter here:

Follow @noeltock

Additional code by Adam Yanalunas, a dude who is passionate about stuff and things … especially front-end development stuff and JavaScript things.

Follow @adamyanalunas

photo credits

If you're interested in licensing any of the images, please contact the photographers by following the links below:

Airplane / Stadium / Ocean / Skyscraper