JQuery Animated Gaussian Blur

Question

On the home page of the website that I am designing, I would like the original image of the hero to come to life from blurry (Gaussian) to sharp. I looked around and was surprised that there is no obviously obvious jQuery solution for this. Did I miss something?

Since I am already loading the jQuery core for other things on the website, I would really like it to use jQuery. I found this example , but it uses YUI, and I would prefer not to load YUI on top of jQuery just for this effect.

Answer 1

How to create a blur effect in a photo editing program, and then fade between a blurry image and a non-blurry 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 jsfiddle: http://jsfiddle.net/jasper/2FZ3Z/1/ (note that you need to click on the image to cause the transition from blurry to not blurry image).

Another way to blur the image would be to put the same image on top of it, move it a few pixels and change its opacity so that the user can see the original image underneath. Then leave the overlay image. This is more like linear blurring, rather than Gaussian.

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

Answer 2

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

You can time, sharpen it, etc.