Join Join
Join

123Parting letters parade

In this effect, images will scroll from right to left as we scroll. Each one scales up, then shrinks away, while the letters of the title gently part out of its path. Let’s get started!

HTML Structure

The structure of the effect is relatively simple. A tall pin-height wrapper will define how long the scroll sequence lasts, and a container inside it holds both the title and the images:

<section class="mwg_effect123">
    <div class="pin-height">
        <div class="container">
            <div class="title">
                ...
            </div>
            <div class="medias">
                ...
            </div>
        </div>
    </div>
</section>

Inside title, we keep two lines as siblings. The top row will be pushed upward and the bottom one downward as images cross between them:

<div class="title">
    <p class="line">Photography is what</p>
    <p class="line">makes the soul swing</p>
</div>

Inside medias, every photograph is a direct img with the media class:

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

Become a member to unlock
the full effect today.

Join now Join now

Discover the platform

See how the platform works: try our free effects.

Try it now Try it now

(No registration or credit card needed)