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

Question

当用户向下滚动页面时，如何模糊图像，然后在模糊（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。