Sep 07 2012

tiltShift.js: Tiltshift-Effects with CSS3 and jQuery

Advertisement

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.

That said in advance, Tock’s little javascript can be steered rather finely by using several parameters. Parameters are passed through the use of the new HTML5 data-attributes. Using data-position you define the position of the image section that should stay in focus. Valid values range from 0 to 100. A value of 50 would center the focus in the middle of the image. Combine that with data-focus, also ranging from 0 to 100, to set the size of the focus. Setting a value of 10 would mean, that 10 percent of the image would stay focussed, while the rest would appear blurred.

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.

Related Links:

About the Author

Dieter Petereit is Noupe's Editor-In-Chief and 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 webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Comments and Discussions
  • Terrypasencio, 10 September 2012

    TiltShift.js is a jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. Its good to read and know more about this.I am contented with your post. I will visit you for more such information.

  • mans labrague, 23 September 2012

    how can you help us in making a forum in the website we are doing right now :)

search form
 
image description image description