如何使用scrollTop（）更改[filter：blur]值？

Question

我看到了媒体滚动效果的codepen，但它不完全是我要找的，因为它不能正确模糊图像 - 它只会改变不透明度。

所以我有一个div：

img.blur { 
width: 100vw; 
min-width: 800px; 
filter: blur(20px); 
} 

如何使用jQuery的scrollTop的（）函数来配置它，这样我向下滚动页面过滤器：模糊会减少或增加？

的一个从codepen是：

$(window).scroll(function() { 
    opacityVal = (s/150.0); 
    $('.blurred-img').css('opacity', opacityVal); 
}); 

所以我想我会受到影响CSS DIV改变$('img.blur')，但我不知道是什么改变opacity和opacityVal来。

谢谢！

---

编辑：我想是在这里这样的效果：

http://jsfiddle.net/byrichardpowell/38MGS/1/

除了当我滚动。

我基本上想做一些类似于他们在FFMark.com第一部分所做的事情。

Answer 1

你只需要设置一个100％的高度上你完全模糊的图像将显示

var MAXSCROLLHEIGHT = 150; // on MAXSCROLLHEIGHT pixel scroll height, the blurred image will be shown on 100% opacity 
$(window).scroll(function() { 
    opacityVal = $(window).scrollTop()/MAXSCROLLHEIGHT; // replaced the fix value by possible config variable 
    if(opacityVal > 1) return; // won't affect the image as you keep scrolling 
    $('img.blur').css('opacity', opacityVal); 
}); 

我觉得跟opacityVal的检查，你会提高性能一点，因为你不会影响元素你继续滚动超出你的MAXSCROLLHEIGHT