CSS滚动擦拭

Question

我正在尝试像这样的example

实现div滚动擦除

有人知道使用CSS来实现此目的的方法吗？我一直在研究，但没有找到任何例子。

这是视差滚动吗？

有人知道他们可以给我指出的任何例子吗？

Answer 1

您可以使用位置粘性：) Browser support

这不是真正的视差滚动。视差效果是“视图依赖”，因此前景移动的速度比背景移动的速度快，并且风景看起来更加真实。

div {
  width: 100vw;
  height: 100vh;
  
  /* This is what you need */
  position: sticky;
  top: 0;
}


div:nth-child(1) {
  background: #ff0000;
}


div:nth-child(2) {
  background: #00ff00;
}

div:nth-child(3) {
  background: #0000ff;
}

<div>1</div>
<div>2</div>
<div>3</div>