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

演示 Fiddle

我的目标是使用 jQuery 增加和减少 CSS 规则 background:rgba() 的 alpha 值，当用户上下滚动时，它会变得模糊。或者是否有其他方法来实现这一点？请帮助我实现这个目标。

- It worked yesterday.

---

预计要将“模糊”效果应用于图像吗？ - guest271314

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

- Tasos

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

<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是一个常用的在线代码编辑工具，可以帮助IT开发人员进行代码分享、调试和演示。你可以在JSFiddle中输入HTML、CSS、JavaScript代码并立即看到结果，也可以与其他人共享你的代码以便协作。

- guest271314

---

非常感谢您的回答。我不知道模糊滤镜。但是我需要使用滚动条来增加和减少模糊密度。 :) - It worked yesterday.

@sam，通过在滚动期间调整Npx值到所需的N，可以“增加和减少模糊密度”。预期的“模糊”效果是否会随着元素向窗口顶部滚动而变得更加明显？ - guest271314