tiltShift.js is nothing short of a little sensation. Using the new CSS3 Image Filters, developer Noel Tock realized a tiltshift-effect for any image you’d want to apply one to. It has of course to be said, that at the time of this writing only Chrome and Safari 6 are able to visualize the effect. Furthermore the pictures have to be generally qualified for the use of tiltshift. But this proves true for all possible fake tiltshifts, as can be achieved by Photoshop and others.
tiltShift.js: Very Clever Use of CSS3 Image Filters
To be absolutely honest, Noel Tock’s jQuery-plugin is more or less a wireframe. The effects applied only work in Chrome and Safari 6 and are generally dependent on being invoked on suitable photos. These should be taken from quite a distance and a higher angle of a subject that is best to be found in the middle of the photo. Of course you could apply tiltshift.js to any other photo, but wouldn’t achieve a visible tiltshift-effect in these cases.
Having set that, data-blur is there to define the radius, while data-falloff will control the size of the area between full focus and full blur. You see, there’s nothing left to chance. For invoking the effect you fire it on a div-wrapper, that should be styled via CSS to avoid unwanted behaviour designwise.
tiltShift.js is made available under the GNU GPL license. Thus it is freely usable for any legal purpose. The project has just been setup on Github and shows a glimpse of the bright future, we as web developers are moving to with accelerating velocity.
- CSS3 Filters: Altering HTML and Images with just CSS – inserthtml
- tiltShift.js – noeltock.com
- noeltock / tiltShift.js – Github
Dieter Petereit is a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called web design and has carried on ever since. Two decades ago he started writing for several online publications, some well, some lesser known. You can meet him over on Google+.