article:
Tutorial: Design Patterns for JavaScript Web Apps
article:
JS Plugin: Baseline

JS Plugin: tiltShift

Advertisement

"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."


Screenshots

ON

Plugin: tiltShift

OFF
Plugin: tiltShift


Usage

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">



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.




source
demo
github
download

Advertisement
Tags: plugin, jquery, image, layout, web, website, internet, browser, chrome, safari

Leave a Comment

No Comment

© Creative3x Ltd.