Replicate The Tilt-Shift Effect - tiltShift
| File Size: | 625 KB |
|---|---|
| Views Total: | 849 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
tiltShift is a jQuery plugin that replicates the tilt-shift effect using CSS3 image filters.
How to use it:
1. Include necessary elements in <head> section
<link rel="stylesheet" href="jquery.tiltShift.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.tiltShift.js"></script>
2. Call the plugin
jQuery(document).ready(function() {
$('.tiltshift').tiltShift();
});
3. Markup
<img src="url" class="tiltshift" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y">
4. Options
- -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”, “y”, or 0-360), the direction of the effect with zero at right.
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.
