Join Join
Join

105Scroll List Index

In this effect, a long list of projects scrolls down the page. Each line drifts sideways as it crosses the viewport, then settles back in place. A fixed preview on the side always shows the image tied to the line closest to the center. Let's build it!

HTML Structure

The DOM splits into two parts: a vertical list of labels and a stack of preview images. We'll keep them in the same order so each line stays tied to its matching photograph by index.

First, the list that carries the copy we read while scrolling:

<section class="mwg_effect105">
    <ul class="container">
        <li>Future Archive Lookbook</li>
        <li>Silent Matter Shop</li>
        <li>Satisfy Running</li>
        <li>Poolsuite FM</li>
        …
    </ul>

Next, the preview stack. Every image sits in the DOM upfront so the browser can load them before we reveal one at a time in JavaScript:

    <div class="medias">
        <img src="./assets/medias/01.png" alt="">
        <img src="./assets/medias/02.png" alt="">
        <img src="./assets/medias/03.png" alt="">
        <img src="./assets/medias/04.png" alt="">
        …
    </div>
</section>

Become a member to unlock
the full effect today.

Join now Join now

Discover the platform

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

Try it now Try it now

(No registration or credit card needed)