Join Join
Join

1103D Flip Cards

In this effect, we will make a series of double-sided cards travel across the screen as the user scrolls. Each card flips to reveal its other face while scaling and pushing forward in depth. Ready? Let’s dive in!

HTML Structure

The structure is a tall pin wrapper and a viewport-sized container. Every card carries two faces: a front image and a back side with another image plus a short text block:

<section class="mwg_effect110">
    <div class="pin-height">
        <div class="container">
            <div class="card">
                <div class="face recto">
                    <img class="media" src="./assets/medias/2.png" alt="">
                </div>
                <div class="face verso">
                    <img class="media" src="./assets/medias/1.png" alt="">
                    <div class="content">
                        <p class="title">TP–7 field recorder</p>
                        <p class="description">Record, edit, trim and layer whatever sound…</p>
                    </div>
                </div>
            </div>
            <div class="card">
                …
            </div>
        </div>
    </div>
</section>

The recto face is what we see first. Once the card flips, the verso takes over with its media and copy.

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)