Take the 2-minute tour ×

On the home page of a website I'm designing, I'd like the initial hero image to animate from blurred (gaussian) to sharp. I've looked around, and have been surprised that there's not a readily obvious jQuery solution for doing this. Am I missing something?

Since I'm already loading the jQuery core for other things on the web site, I'd really like it to utilize jQuery. I found this example, but it's using YUI, and I'd rather not load YUI on top of jQuery just for this effect.

share|improve this question
I also found this plugin as a possible solution: plugins.jquery.com/project/blurimage –  Keefer Nov 8 '11 at 14:58
add comment

2 Answers

up vote 8 down vote accepted

How about creating your blur effect in a photo-editing program and then fading between the blurred image and the non-blurred image:

jQuery(function ($) {
    $('#blurred_image, #focused_image').fadeToggle(1500, function () {
        //this callback function could be used to show a message or whatever else...

Here is a jsfiddle: http://jsfiddle.net/jasper/2FZ3Z/1/ (note you need to click on the image to trigger the transition from blurred to non-blurred image).

Another way to de-blur an image would be to position the same image over itself, move it a few pixels, and change its opacity so the user can see the original image underneath. Then animate the overlay image. This appears more like linear blur rather than Gaussian however.

Here's a jsfiddle: http://jsfiddle.net/jasper/FTt3b/ (click the image to animate away the blur).

share|improve this answer
Not to re-open a thread that's already answered, but is it possible to do this without the click to trigger the toggle? Can I do it onload in the document ready function instead? –  Keefer Nov 21 '11 at 21:31
Yeah, all you need to do is remove the line of code that binds to the click event and it will run on document.ready. Here is a link to my first jsfiddle altered to run on document.ready rather than on click: jsfiddle.net/2FZ3Z/6. Note that you may want to run the code on window.load rather than document.ready since the images will be loaded when the window.load event fires but they may not be loaded when the document.ready event fires. –  Jasper Nov 21 '11 at 23:05
that's what I figured, but when I do it without the click. It basically looks like it's fading in a single image. This is my syntax: $(window).load(function() { $('#blurred, #focused ').fadeToggle(7500, function () { }); }); –  Keefer Nov 22 '11 at 21:02
You could use FireBug's Net panel to see what assets are being downloaded and when they are downloaded to make sure both images are loading before the animation plays. –  Jasper Nov 22 '11 at 21:09
It turned out the problem was the slider it was embedded in. As soon as I pulled it out of there, it did better. –  Keefer Nov 23 '11 at 14:42
add comment

Check this library out, it lets you do exactly what you're looking for without requiring duplicate images: http://labs.bigroomstudios.com/libraries/animo-js

You can time it, sharpen it back, etc.

share|improve this answer
add comment

Your Answer


