用CSS填充滚动时的屏蔽文本

Question

我看到了这个简洁的例子，我想知道是否可以用javascript/CSS来实现？

基本上，我看到有一个文本应用了实验性的文本笔划CSS属性，但当用户滚动经过它时，文本会有填充效果，不像填充，更像CSS掩码类型的效果？

这就是我在说的。

https://i.imgur.com/cnvav7m.mp4

我怎样才能达到这种效果？我不需要你写所有的逻辑，我只需要有人向我解释他们是如何产生这种巧妙的效果的？？

Answer 1

要实现视差效果，请将这些css道具添加到背景图像中：

.my-background {
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover
}