038
Dynamic list scrolling
One of my favorite effects! When the user scrolls, a section moves horizontally. Depending on the scroll progress, a specific image appears, just like in a flick book. Got your coffee? Glasses on? Let’s dive in!
HTML Structure
We’ll define a height for the pin-height div, which will determine the scrolling distance. The container div will hold the list of projects, placed one after the other.
<section class="mwg_effect038">
<div class="pin-height">
<div class="container">
<div class="project">
<div class="datas">
<p class="label">Kara Fall Collection</p>
<p class="year">2024</p>
</div>
<img class="media" src="./assets/medias/01.png" alt="">
</div>
<div class="project">
<div class="datas">
<p class="label">MNR®STUDIO</p>
<p class="year">2024</p>
</div>
<img class="media" src="./assets/medias/02.png" alt="">
</div>
...
</div>
</div>
</section>