- Overview
- Documents
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.
Source: noeltock.com
Jan 06, 2015 in Animation 3710 views
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.
Source: noeltock.com
1. INCLUDE CSS AND JS FILES
<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. HTML
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.
3. JAVASCRIPT
Call the plugin on any collection of images you want by adding the following jQuery:
jQuery(document).ready(function() { $('.tiltshift').tiltShift(); });
4. NOTES
Tagged with:
tiltshift.js
css3 filters
tilt shift effect
css3 image filters
jquery plugin
tilt-shift
effects
blur
falloff
css3
Related Articles