Как применить размытие в движении в javascript/jquery?

Мне интересно, как сделать размытие движения в 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>

javascript slider jquery motion-blur gallery
person Tib    schedule 09.03.2012    source источник
comment
Нет реального способа сделать это с помощью чистого JS как такового. Вы можете использовать холст. Однако метод, который у вас есть, должен помочь. Если вы хотите уменьшить количество изображений, вы можете сделать их (вроде) спрайтами: изображения в два раза выше, верхняя часть = нормальная, нижняя часть = размытая. Затем установите изображение в качестве фонового изображения с переключением вертикального положения между ними.   -  person isotrope    schedule 09.03.2012
comment
@isotrope Похоже, все, что Тиб хочет сделать, это заменить изображение, если галерея прокручивается. Ничего фантастического.   -  person Jeffrey Sweeney    schedule 09.03.2012
comment
Это отличный вопрос, поэтому я не уверен, почему за него проголосовали. :/   -  person Anderson Green    schedule 21.02.2013
comment
@isotrope На самом деле это можно сделать с помощью непрозрачности: см. здесь.   -  person Anderson Green    schedule 21.02.2013
comment
3 года спустя: несколько хороших демонстраций tympanus.net/Tutorials/MotionBlurEffect/index.html   -  person Tib    schedule 08.04.2015
comment
Размытие движения холста и размытие движения jQuery — две совершенно разные вещи. Это определенно не дубликат и на самом деле действительно хорошая тема.   -  person Rorschach120    schedule 20.04.2015

Ответы (2)


arrow_upward
2
arrow_downward

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

$('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/

person Jasper    schedule 09.03.2012
comment
Есть одна проблема: кажется, что исходное изображение не исчезает, пока появляется новое изображение. - person Anderson Green; 21.02.2013
comment
Я тестирую это в Google Chrome в Windows, и исходное изображение не исчезает, а клонированное изображение появляется. Есть ли способ исправить эту проблему? - person Anderson Green; 21.02.2013
comment
@AndersonGreen Исчезновение исходного изображения не является частью кода, который я разместил. Вы можете легко добавить этот код, сославшись на this. Например: $(this).animate({ opacity : 0.5 }, 500). Затем вам нужно будет поместить аналогичный код в обработчик событий mouseleave для клона, чтобы вернуть непрозрачность исходному изображению. - person Jasper; 21.02.2013
comment
Что, если бы я хотел, чтобы движение двигалось вправо и влево, пока мышь была на изображении, и удаляло движение, когда мышь отсутствовала? - person Si8; 04.04.2014
comment
@SiKni8 SiKni8 Если вы хотите одновременно анимировать один клон влево и один вправо, просто создайте новый клон и настройте его анимацию так, чтобы она шла влево, а не вправо. Если вы хотите анимировать один и тот же клон вперед и назад, вы можете настроить цикл внутри вашего обработчика событий mouseenter для циклической анимации (Совет: используйте стандартизированную функцию обратного вызова, которая учитывает текущее состояние системы). - person Jasper; 04.04.2014

arrow_upward
0
arrow_downward

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

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

person Aldo Stracquadanio    schedule 09.03.2012