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

Posted 2023-03-06

【中文标题】在滚动上使用 css 和 jQuery 创建模糊效果

【英文标题】：Creating blur effect with css and jQuery on scroll

【发布时间】：2015-08-05 12:08:11

【问题描述】：

当用户使用 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 值，因此滚动会变得模糊。还是有另一种方法可以做到这一点？请帮助我实现这一目标。

【问题讨论】：

是否应该将“模糊”效果应用于图像？

【参考方案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)" )     
);

【参考方案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;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="out">
    <div class="inner"></div>
</div>
<div class="this-div-kills-browsers"></div>

jsfiddle https://jsfiddle.net/2dmxLnuy/5/

【讨论】：

非常感谢您的回答。我不知道模糊滤镜。但我需要通过滚动来增加和减少模糊密度。 :)

@sam 可以通过在滚动期间将Npx 值调整为所需的N 来“增加和减少滚动的模糊密度”吗？随着元素滚动到window 的顶部，“模糊”效果的预期结果是否会变得更加明显？