在滾動時在圖像上添加模糊

我試圖在向下滾動頁面時逐步添加濾鏡：blur（0px）。在滾動時在圖像上添加模糊

所以當你滾動圖像模糊PX上升。需要逐漸做到這一點，但不知道如何通過jQuery實現它。有什麼幫助嗎？

我至今是：然而

$(window).scroll(function() { 

     var scrollTop = $(window).scrollTop(); 
     var divam = 5; 
      $(".ftimg").css({ 
       "background-position":"0px -"+scrollTop/divam+"px"  
      }); 

    });

這個編輯的背景位置，即時通訊不知道如何chnage模糊。這樣的事情並不工作：

$(window).scroll(function() { 

     var scrollTop = $(window).scrollTop(); 
     var divam = 5; 
      $(".ftimg").css({ 
       "filter":"blur: -"+scrollTop/divam+"px"  
      }); 

    });

來源

2015-04-07 Abdul Samad

你能證明你通過尋找到jQuery的.scroll（）事件處理HTTPS至今 – atmd

開始： //api.jquery.com/scroll/。您可以將事件綁定到$（窗口），並根據滾動位置增加或減少過濾器：blur（）值。你可以通過使用jQuery的.scrollTop（）函數獲取滾動條的位置http://api.jquery.com/scrollTop/ – SteWoo

我正在使用scrolltop howveer我認爲我的語法是錯誤的 –

我設法解決它在我自己的：

$(window).scroll(function() { 

      var scrollTop = $(window).scrollTop(); 
      var divam = 90; 
      var blurstr = "blur("+scrollTop/divam+"px)"; 
       $(".cover-pic").css({ 
        "-webkit-filter": blurstr, 
        "filter": blurstr 
       }); 

     });

來源

2015-04-07 11:37:05

在滾動時在圖像上添加模糊

回答

相關問題