Join
Join

038Dynamic 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>

Become a member to unlock
the full effect today.

Join now

Discover the platform

See how the platform works: try Effect #000 for free.

Try it now

(No registration or credit card needed)