Question

我正在尝试在向页面顶部滚动时淡出文本。有很多解决方案，但我找不到一个在背景图像存在时有效的解决方案。我找到了一支使用mask-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1) 100px);的笔，我试图修改它以达到我想要的效果。

我几乎就在这支钢笔中：http://codepen.io/jdesilvio/pen/YwKpPp

我无法在页面顶部显示淡出fixed，而不是滚动文字。

这是我到目前为止的CSS：

.slab__content {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    padding: 2rem;

    // Fade out with mask
   -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1) 300px);
    mask-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1) 100px);
  }

.slab__content:after {
  position: fixed;
  content: "";
  left: 0px;
  top: 0px;
  }

Answer 1

您需要向窗口添加一个滚动事件处理程序（假设您可以访问jquery）：

$(window).on("scroll", function(e) {
  var text = $(".slab__content");
  text.css('mask-image', '-webkit-linear-gradient(top, rgba(0,0,0,0) ' + ($('body').scrollTop()-200) + 'px , rgba(0,0,0,1)' +($('body').scrollTop()+300)+'px)');
})

这里我们根据正文的滚动位置更改样式属性mask-image的定义。

你可以在这里看到这个（从你的例子中分叉）：http://codepen.io/anon/pen/wMwoxQ

使用CSS将滚动文本淡入图像 - 几乎就在这里

1 个答案: