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
See credits at bottom of page for Photograpger link
See credits at bottom of page for Photograpger link
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.

notes

authors

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

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

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