如何复制这种滚动效果？

Question

https://medium.com/message/81e5f33a24e1

当您向下滚动各个部分时，当您滚动浏览某个标记并且标题文本淡入时，背景会淡出。我认为这是某种CSS转换，但我发现很难在css上导航特定网站。

Answer 1

javascript正在观看滚动：

window.onscroll = function(){
    var scroll = window.pageYOffset;
    //do smth (like if you've reached the div, add a class to it)
}

当到达要转换的div时，您向其添加一个类（或者在向上滚动时将其删除）。然后在css：

中定义此类（我的示例中为.reachedByScroll）带来的转换

div.reachedByScroll .background{
    filter: blur(10px);
}
div.reachedByScroll .text{
    opacity: 1;
}

为了平滑，您还可以在css中添加transition。

此答案详述了滚动内容的显示方式，而不是滚动速度减慢的方式。这不是所要求的。