Join Join
Join

065Triple marquee parallax

In this effect, we stack three image ribbons wider than the viewport in a fixed-height band. As you scroll, the band pins while each row glides sideways. Nothing starts until every image has loaded so those measurements stay accurate. Let’s go!

HTML Structure

The section wraps a tall spacer, then a column that stacks three horizontal strips. Each strip is its own flex row of images sharing one class so we can wait on every decode before measuring scroll widths:

<section class="mwg_effect065">
    <div class="pin-height">
        <div class="container">
            <div class="medias">
                <img class="media" src="assets/medias/01.png" alt="">
                …
                <img class="media" src="assets/medias/12.png" alt="">
            </div>
            <div class="medias">
                …
            </div>
            <div class="medias">
                …
            </div>
        </div>
    </div>
</section>

As we scroll, the band stays pinned while each ribbon glides sideways — every row travels its own distance because each strip measures its own overflow once layout settles.

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)