滚动时的运动模糊效果

问题描述：

我试图在滚动时将运动模糊效果应用于HTML div。为了做到这一点，我需要每五分之一克隆每个div，并在滚动时将其位置固定在页面上。我还需要每1/5秒减少每个div克隆的不透明度，并确保一次只有5个div的克隆在一次（所以我赢了有数百个div的克隆）几秒钟后的页面）。使用这种方法可以在JavaScript中创建运动模糊效果吗？滚动时的运动模糊效果

<div id = "blurOnScroll"> 
Create the illusion of a motion blur by creating clones of this div every 1/5 of a second, reducing the opacity of each clone every 1/5 of a second, and remove each clone as soon as it has completely faded away. 
</div> 
<script type = "text/javascript"> 
    function motionBlurEffect(){ 
     //create the illusion of a motion blur effect, as described above. 
    } 
</script>

我需要找到一种方法将页面元素保持在页面上的固定位置（以模拟模糊效果）。这可能是一个很好的起点：http://stackoverflow.com/questions/2907367/have-a-div-cling-to-top-of-screen-if-scrolled-down-past-it – 2013-02-21 04:47:31

元素被模糊（以及它的所有克隆）需要具有相同的CSS类，以便每个克隆的不透明度可以同时降低。只要不透明度降到某个点以下（比如50％），每个具有该类的元素都会被删除。 – 2013-02-21 04:50:50

现在我只需要找到一种方法来设置和获取每个元素的不透明度，以便我可以以1/5秒的间隔减少元素的每个克隆的不透明度。 – 2013-02-21 04:52:42

答

我发现＃2这篇文章：

How is this blur effect done in javascript?

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

或者，也许这样的功能：

function addParallaxScrolling() { 
     if (!$("bgImageTop")) { 
      return 
     } 
     if (window.orientation == undefined && !Browser.firefox) { 
      var body = document.getElement("body"), 
       headerimage = $("bgImageTop"), 
       headergrad = $("bgGradientTop"); 
      window.addEvent("scroll", function windowScrollEvent() { 
       body.setStyle("background-position", "0px " + (this.getScroll().y/4) + "px"); 
       headerimage.setStyle("top", this.getScroll().y/4 + "px"); 
       headergrad.setStyle("top", headerimage.getStyle("top").toInt() + headerimage.getStyle("height").toInt() + "px") 
      }) 
     } 
    }

希望我可以帮你。

你在哪里找到了'addParallaxScrolling'函数？ – 2013-02-21 09:06:02

我仍然不确定在滚动页面时是否可以使用这些函数来创建模糊效果。 – 2013-02-21 09:07:31

在本网站：http：//css-tricks.com/forums/discussion/11255/cool-vertical-parallax-page-scroll-effect-/p1 – 2013-02-21 09:09:52

滚动时的运动模糊效果

相关推荐