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.

Collins Creative tiltshift.js
Collins Creative tiltshift.js
Collins Creative tiltshift.js
Collins Creative tiltshift.js

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:

Follow @noeltock

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

Follow @adamyanalunas

photo credits

All photographs taken by Steven Collins during holidays to Spain.