如何使用scrollTop()更改[filter:blur]值

Question

我看到了Medium滚动效果的代码笔，但它并不是我想要的，因为它不能正确地模糊图像——它只会改变不透明度。

所以我有一个div:

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

如何使用jQuery scrollTop（）函数对其进行配置，以便在向下滚动页面时，filter:blur会减少或增加？

来自codepen的是：

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

所以我想我会将受影响的CSSdiv更改为$('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 时，你不会影响元素