I’m trying to create a similar layout where each section shows up with scroll. Is there a way to create this with CSS/JS?
https://www.youtube.com/watch?v=LF7K2zuh-H8
I tried using position fixed and sticky for sections to make this work, but it doesn’t seem to be working.
A wavelike design appears to be flowing across the canvas from left to right. At its heart lies another small cloud, indicating some kind of technological feature or product.
.scroll_container {
margin-top: 2800px;
height: 1200px;
margin-left: 20%;
position: relative;
overflow: hidden;
}
.scroll_container div {
position: sticky;
position: -webkit-sticky;
width: 800px;
height: 400px;
}
.scroll_1 {
background: orange;
top: 0px;
}
.scroll_2 {
top: 400px;
background: turquoise;
z-index: 10;
}
.scroll_3 {
top: 800px;
background: teal;
z-index: 20;
}
<div class="scroll_container">
<div class="scroll_1">
A wavelike design appears to be flowing across the canvas from left to right. At its heart lies another small cloud, indicating some kind of technological feature or product. -
</div>
<div class="scroll_2">
A wavelike design appears to be flowing across the canvas from left to right. At its heart lies another small cloud, indicating some kind of technological feature or product. -
</div>
<div class="scroll_3">
A wavelike design appears to be flowing across the canvas from left to right. At its heart lies another small cloud, indicating some kind of technological feature or product. -
</div>
</div>