Question

我看到了中等滚动效果的编码器，但它并不是我正在寻找的，因为它没有正确模糊图像 - 它只会改变不透明度。

所以我有一个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

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

1 个答案: