Как применить motion-blur в javascript/jquery?

Question

Мне интересно, как сделать размытие движения в javascript/jquery. У меня есть горизонтальная галерея, и я хочу применить размытие в движении, когда изображения движутся. На самом деле, он отлично работает таким образом: наложение изображения с размытостью (фотошоп) и непрозрачность варьируется в зависимости от скорости изображений. Визуализация выглядит довольно хорошо, но мне нужно загрузить 2 раза все мои изображения, и это отстой. В 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

Вы можете использовать абсолютное позиционирование и непрозрачность для создания эффектов размытия, накладывая одно и то же изображение поверх себя. Вот короткая демонстрация, вероятно, это не тот эффект, который вам нужен, но он может помочь вам начать:

$('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();
        });
    });      
});​

Это создает клон изображения, когда вы наводите на него мышью, затем клон анимируется до размытия, а когда вы клонируете мышью клонированное изображение, оно исчезает и удаляется из DOM.

Вот демо: http://jsfiddle.net/mbFTk/93/

Answer 2

Чисто решение на javascript не так просто реализовать, вы можете попробовать эту библиотеку в любом случае:

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