javascript - 如何使用滚动模糊元素，直到它模糊到某个点？

Question

如何在用户向下滚动页面时模糊图像，然后在到达blur(15px)时停止？我不希望图像变得如此模糊以至于占据整个屏幕。

这是我所拥有的:

HTML:

<img class="boop" src="images/boop.jpg" />

jQuery:

$(window).scroll(function(e) {
  var distanceScrolled = $(this).scrollTop();
  $('.boop').css('-webkit-filter', 'blur('+distanceScrolled/30+'px)');
});

我一直在谷歌搜索如何为 distanceScrolled 变量或 CSS 过滤器设置最大值，但似乎无法弄清楚。谢谢!

Answer 1

您可以在模糊函数中计算滚动量的最小值和 15。像这样:

$(window).scroll(function(e) {
  var distanceScrolled = $(this).scrollTop();
  $('.boop').css('-webkit-filter', 'blur(' + Math.min(distanceScrolled/30, 15) + 'px)');
});

然后它将在 15px 处停止。