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>