Join Join
Join

060Masked vertical image rail

In this effect, we animate an image scroll as the user scrolls. Each image resizes within its mask depending on the space it has left relative to the height of the screen. A guaranteed original result!

HTML Structure

The markup is a tall wrapper, a pinned frame, a small headline block, and a long vertical list of slides. Each slide is either a spacer with an empty media shell or a real image — we always keep five slots visible in the viewport at once:

<section class="mwg_effect060">
    <div class="pin-height">
        <div class="container">
            <div class="content">
                <p>Featured Projects</p>
                <p>2022 → 2026</p>
            </div>
            <div class="slides">
                <div class="slide" aria-hidden="true"><div class="media"></div></div>
                <div class="slide" aria-hidden="true"><div class="media"></div></div>
                <div class="slide"><img class="media" src="assets/medias/01.png" alt=""></div>
                <div class="slide"><img class="media" src="assets/medias/02.png" alt=""></div>
                …
                <div class="slide"><img class="media" src="assets/medias/12.png" alt=""></div>
                <div class="slide" aria-hidden="true"><div class="media"></div></div>
                <div class="slide" aria-hidden="true"><div class="media"></div></div>
            </div>
        </div>
    </div>
</section>

As we scroll, only five images read as open at once. The centre slot takes most of the height while the neighbours tuck in with softer rounded masks.

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)