How to apply a motion-blur in javascript/jquery?

Question

I'm wondering how to make a motion blur in javascript/jquery. I've an horizontal gallery and I want to apply the motion blur when the images are moving. Actually, It works perfectly with that way : an overlay image with a motion blur (photoshop) and the opacity varies depending to the speed of the images. The render looks pretty good but i need to load 2 times all my images and it 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>

There's no actual way to do it with pure JS, per se. You could use canvas. The method you have should do the trick, though. If you want to reduce the amount of images, you could make them (sort of) sprites : images twice as high, top part = normal, bottom part = blurred. Then set the image as a background image with the vertical position switching between the two. — isotrope, Mar 09 '12 at 18:04
@isotrope It looks like all Tib wants to do is replace the image if the gallery is scrolled. Nothing fancy. — Jeffrey Sweeney, Mar 09 '12 at 18:08
This is a great question, so I'm not sure why it was downvoted. :/ — Anderson Green, Feb 21 '13 at 03:32
@isotrope It actually is possible to do this using opacity: [see here](http://stackoverflow.com/a/9639043/975097). — Anderson Green, Feb 21 '13 at 04:20
3 years later: some good demos http://tympanus.net/Tutorials/MotionBlurEffect/index.html — Tib, Apr 08 '15 at 12:42
Canvas motion blur and jQuery motion blur are two completely different things. This is definitely not duplicate and is actually a really good topic. — Rorschach120, Apr 20 '15 at 13:11

Jasper · Answer 1 · 2014-04-03T20:48:22.053

2

You can use absolute positioning and opacity to create blur effects by stacking the same image on top of itself. Here's a quick demo, it's probably not the effect you want but it can get ya started:

$('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 once you mouse-over it, then the clone animates to a blur and when you mouse-out the cloned image, it fades-out and is removed from the DOM.

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

edited Apr 03 '14 at 20:48

answered Mar 09 '12 at 18:22

Jasper

75,717
14
151
146

There's one problem: it appears that the original image isn't fading out while the new image fades in. – Anderson Green Feb 21 '13 at 03:25
I'm testing this in Google Chrome on Windows, and the original image doesn't fade out while the cloned image fades in. Is there some way to correct this problem? – Anderson Green Feb 21 '13 at 03:34
@AndersonGreen Fading-out the original image is not part of the code I posted. You could add that code easily by referencing `this`. For instance: `$(this).animate({ opacity : 0.5 }, 500)`. You'd then have to place similar code in the `mouseleave` event handler for the clone to add the opacity back to the original image. – Jasper Feb 21 '13 at 17:35
What if I wanted to make the motion go right and left as long as mouse is on the image and remove the motion when the mouse is out? – Si8 Apr 03 '14 at 20:45
@SiKni8 If you mean to animate one clone left and one right at the same time then just create a new clone and set its animation to go left rather than right. If you mean to animate the same clone back and forth, you can setup a loop inside your `mouseenter` event handler for the looping animation (Hint: use a standardized callback function that takes into account the current state of the system). – Jasper Apr 03 '14 at 20:50

score 0 · Answer 2 · answered Mar 09 '12 at 18:03

0

A pure javascript solution is not that easy to implement, you could give a try to this library anyway:

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

answered Mar 09 '12 at 18:03

Aldo Stracquadanio

6,167
1
23
34

How to apply a motion-blur in javascript/jquery?

2 Answers2

Linked