CSS Scroll Wipes

Question

Я пытаюсь реализовать вайпы div scroll, как этот пример

Кто-нибудь знает способ достижения этого с помощью CSS вместо этого?Я исследовал, но не нашел никаких примеров.

Это параллакс-прокрутка?

Кто-нибудь знает какие-либо примеры, на которые они могут указать мне?

Answer 1

Вы можете использовать позицию sticky :) Поддержка браузера

Это не совсем параллаксная прокрутка.Эффекты параллакса зависят от вида, поэтому передний план движется быстрее, чем фон, и пейзаж выглядит более реальным.

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>