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

【问题标题】：How do I blur an element with scroll, until it's blurred to a certain point?如何使用滚动模糊元素，直到它模糊到某个点？
【发布时间】：2014-11-26 00:04:12
【问题描述】：

如何在用户向下滚动页面时模糊图像，然后在达到 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 过滤器设置最大值，但似乎无法弄清楚。谢谢！

【问题讨论】：

标签： javascript jquery html css filter

【解决方案1】：

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

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

然后它将停在15px。

【讨论】：

比我希望的还要简单。谢谢！