CSS Scroll Wipes

Question

I am trying to implement div scroll wipes like this example

Does anybody know of a way to achieve this using CSS instead? I have been researching but haven't found any examples.

Is this parallax scrolling?

Does anybody know of any examples they can point me to?

Answer 1

You can use position sticky :) Browser support

This is not really parallax scrolling though. Parallax effects are "view dependend", so that the foreground moves faster than the background and the scenery looks more real.

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>