如何在javascript / jquery中应用运动模糊？ [英] How to apply a motion-blur in javascript/jquery?

问题描述

我想知道如何在javascript / jquery中制作运动模糊。我有一个水平画廊，我想在图像移动时应用运动模糊。实际上，它与这种方式完美配合：具有运动模糊（photoshop）的叠加图像和不透明度根据图像的速度而变化。
渲染看起来很不错，但我需要加载2次我的所有图像，它很糟糕。
in html：

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>

推荐答案

您可以使用绝对定位和不透明度来创建模糊效果通过在自身顶部堆叠相同的图像。这是一个快速演示，它可能不是你想要的效果，但它可以开始：

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

一旦鼠标创建了图像的克隆 - 然后，克隆动画化为模糊，当你将鼠标移出克隆的图像时，它会淡出并从DOM中移除。

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.

这是一个演示： http://jsfiddle.net/mbFTk/93/

这篇关于如何在javascript / jquery中应用运动模糊？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！