在滚动时使用css和jQuery创建模糊效果

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

HTML

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\')); }); 

演示小提琴

我想要做的是增加和减少css规则背景的alpha值：当用户向上和向下滚动时使用jquery的rgba（），因此滚动会变得模糊。 还是有另一种方法吗？ 请帮助我实现这一目标。

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)" }) }); 

Answer 2

对于“模糊”效果，尝试使用css filter blur(Npx) ，其中N是数字; px css像素单位例如; 4px

 var hideThatKitty = $('.out').innerHeight(); $(window).on('scroll', function () { hideThatKitty = hideThatKitty / $('.this-div-kills-browsers').offset().top $('.out') .css({"webkit-filter": "blur(4px)", "moz-filter":"blur(4px)", "ms-filter":"blur(4px)", "o-filter":"blur(4px)", "filter":"blur(4px)"}); }); 

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