Question

如何在浏览器窗口的顶部和底部固定模糊效果。因此，当您滚动时，您会看到页面上的元素在页面上下移动时变得模糊。请看一下这个例子：goo.gl/MOIdF2

是否有可用的jQuery插件或类似的东西？

Answer 1

在这里，我为您或任何想要了解它的人提取了该页面的css代码：

在主包装器上，可以是body标签或包装整个页面的任何元素，放置这些css代码。确保为linear-gradient添加供应商特定的前缀（请参阅参考here）：

#your_wrapper:before {
    background: linear-gradient(center top , #fff 0%, rgba(255, 255, 255, 0) 60%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    content: "";
    display: block;
    height: 300px;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100%;
}

#your_wrapper:after {
    background: linear-gradient(center bottom , #fff 0%, rgba(255, 255, 255, 0) 60%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: 0;
    content: "";
    display: block;
    height: 300px;
    left: 0;
    pointer-events: none;
    position: fixed;
    width: 100%;
}

#your_wrapper {
  display: block;
  margin: 0 auto 200px;
  padding-left: 102px;
  padding-top: 300px;
  position: relative;
}

Answer 2

在您提供的示例中，他们已将CSS渐变（纯白色到透明）应用于:before伪元素，然后将它们放置在文本顶部。您可以做同样的事情，但用CSS模糊过滤器替换渐变，如下所示：

.blurry {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

请注意，CSS过滤器相对较新，Internet Explorer尚不支持。 Here's some documentation和here are some examples。

您可以使用Javascript在用户开始滚动时添加模糊效果，然后在短暂超时后删除模糊效果，如下所示：

<script>
  var timer;
  $(window).on('scroll', function(e) {
    // Apply blur filter to your elements by adding a class
    $('.your-element').addClass('blurry');
    clearTimeout(timer);
    timer = setTimeout(onScrollEnd, 1000);
  });
  function onScrollEnd() {
    // Remove blur filter from your elements by removing a class
    $('.your-element').removeClass('blurry');
    console.log('Stopped Scrolling'); 
  }
</script>

如何在滚动时在上下浏览器窗口中获得固定的模糊效果？

2 个答案: