jquery - 在滚动上使用 css 和 jQuery 创建模糊效果

Question

我试图在用户使用 css 和 jquery 上下滚动浏览器窗口时创建模糊效果。这是我的代码。

HTML

<div class="out">
    <div class="inner"></div>
</div>
<div class="this-div-kills-browsers">
</div>

CSS

.out {
    width: 100%;
    height: 800px;
    background: url(https://placekitten.com/1200/800) no-repeat;
}
.this-div-kills-browsers {
    height: 1000px;
}

jQuery

var hideThatKitty = $('.out').innerHeight();

$(window).on('scroll', function () {
     hideThatKitty = hideThatKitty/$('.this-div-kills-browsers').offset().top    
    $('.inner').css('background', rgba(255, 255, 255, \''0'+hideThatKitty\'));
});

demo fiddle

我想做的是在用户上下滚动时使用 jquery 增加和减少 css 规则 background:rgba() 的 alpha 值，因此它会随着滚动而变得模糊。或者还有另一种方法吗？请帮助我实现这一目标。

Answer 1

在模糊图像的同时滚动

演示

https://jsfiddle.net/vduucu87/

代码

$(window).on('scroll', function () {
    var pixs = $(document).scrollTop()
    pixs = pixs / 100;
    $(".out").css({"-webkit-filter": "blur("+pixs+"px)","filter": "blur("+pixs+"px)" })     
});