You must have heard of Tilt Shift Photography, and now we can add tilt shift effects to the photos using jQuery Plugin created by @noeltock, which uses CSS3 too. The Plugin is named tiltshift.js by the developer, and for those who are currently running photography blogs or even personal blogs, this simple yet effective jQuery Plugin is worth trying out.
Who don’t love cool photos, and it can also be helpful for bloggers who showcase compilations of wallpapers, photographs etc. I already tried this script and it works finely, infact it creates Tilt Shift Photos seeing which you will definitely say a WOW!
Using CSS3 behind giving photos a Tilt Shift looks is actually a nice idea, and most of us should haven’t even thought of it, atleast me.
This plugin will help you deliver most attractive images on your blogs. It adds Tilt Shift layer on the desired portion of your photo using CSS3. So, lets started with the tutorial. Before that, this is how your photos will look like after implementing the script on your photos.
Implementing tiltshift.js
First of all, you need to download the jQuery file tiltshift.js, which is the core of everything what we are going to do. You can download the jQuery plugin from Github.
Put this file on your server. Use the below jQuery function to Call the script anywhere where your photos which are going to be made Tilt Shift exist, most probably on the page where you are going to transform images for Tilt Shift effect.
jQuery(document).ready(function() {
$('.tiltshift').tiltShift();
});
And now you need to set the parameters of the plugin in order to get the best and required results.
<img src="url" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y">
These parameters helps the plugin to fetch your requirements and display up desired Tilt Shift Layer on the Photo. You can know more about these parameters below. One more thing, you need to mention all the 5 different parameters to the photos you want to show up Tilt Shift Effect.
More About Parameters and Variables
- -position (0-100), defines the point of focus.
- -blur (0-?), blur radius in pixels, use either 1 or 2.
- -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.
Since the CSS3 properties used in this jQuery Plugin are not supported in major browsers so far, therefore you can see this Tilt Shift Photo effect only on Google Chrome or Safari 6.
