滾動時的運動模糊效果

我試圖在滾動時將運動模糊效果應用於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>

來源

2013-02-21 Anderson Green

我需要找到一種方法將頁面元素保持在頁面上的固定位置（以模擬模糊效果）。這可能是一個很好的起點：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") 
      }) 
     } 
    }

希望我可以幫你。

來源

2013-02-21 08:30:26

你在哪裏找到了'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

滾動時的運動模糊效果

回答

相關問題