7

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.

Keefer
  • 2,269
  • 7
  • 33
  • 50
  • I also found this plugin as a possible solution: http://plugins.jquery.com/project/blurimage – Keefer Nov 08 '11 at 14:58

2 Answers2

8

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).

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • 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`: http://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
0

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.

pfrank
  • 2,090
  • 1
  • 19
  • 26