How to apply motion-blur in javascript / jquery?

Question

I am wondering how to make motion blur in javascript / jquery. I have a horizontal gallery, and I want to apply motion blur when the images are moving. In fact, it works just fine with this path: motion blur overlay (Photoshop) and opacity vary depending on the speed of the images. The result looks good, but I need to upload 2 times all my images, and that sucks. In html:

<div id="slider wrapper"> <ul> <li> <a href=""> <img src="img1.jpg"/> <img src="img1_blur.jpg"/> </a> </li> <li> <a href=""> <img src="img2.jpg"/> <img src="img2_blur.jpg"/> </a> </li> <li> <a href=""> <img src="img2.jpg"/> <img src="img2_blur.jpg"/> </a> </li> </div> 

Answer 1

You can use absolute positioning and opacity to create blur effects by laying the same image on top of you. Here's a quick demo, maybe this is not the effect you want, but it can start:

 $('img').on('mouseenter', function () { var $theClone = $(this).clone().css({ opacity : 0.5, position : 'absolute', top : 0 }); $(this).parent().append($theClone); $theClone.animate({ left : 10 }, 500).on('mouseleave', function () { $(this).stop().fadeOut(250, function () { $(this).remove(); }); }); });​ 

This creates a clone of the image as soon as you hover over it, and then clones the animation to blur, and when you pull out the cloned image, it disappears and is removed from the DOM.

Here is a demo: http://jsfiddle.net/mbFTk/93/

Answer 2

A pure javascript solution is not so simple to implement, you can try this library anyway:

http://www.pixastic.com/lib/