Get new jQuery plugins just once a week
September 8, 2012
TiltShift-js | Css3 filters for tiltshift effects
TiltShift-js is 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.To use,Call the plugin on any collection of images you want by adding the following jQuery:
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” or “y”), the direction of the effect.
Created by Noel Tock
CSS3 filters for tiltshift effect
Sign up for our weekly newsletter.
10 Most Amazing Couple Gifts
A comprehensive guide to couple gift Ideas for Valentine’s Day, Weddings, Anniversaries for your spouse, friend, fiance, boyfriend / girlfriend.
Take me there !
Continue to jquer.in