如何通過滾動模糊某個元素，直至模糊到某個點？

Question

當用戶向下滾動頁面時如何模糊圖像，然後在到達模糊（15px）時停止？我不希望圖像變得如此模糊，以至於它佔據了整個屏幕。

這是我有：

HTML：

<img class="boop" src="images/boop.jpg" /> 

的jQuery：

$(window).scroll(function(e) { 
    var distanceScrolled = $(this).scrollTop(); 
    $('.boop').css('-webkit-filter', 'blur('+distanceScrolled/30+'px)'); 
}); 

我一直在谷歌上搜索如何爲distanceScrolled變量設置爲最大值或CSS過濾器，似乎無法弄清楚。謝謝！

Answer 1

您可以計算滾動量的最小值和模糊函數中的15。像這樣：

$(window).scroll(function(e) { 
    var distanceScrolled = $(this).scrollTop(); 
    $('.boop').css('-webkit-filter', 'blur(' + Math.min(distanceScrolled/30, 15) + 'px)'); 
}); 

然後它將停止在15px。