Join Join
Join

074Pinned bottom hinge

A pinned stack of cards sits in the centre of the viewport. As we scroll, each card pivots in turn on its bottom edge — the front face swings away and the back face takes over. Let's see how we stage it!

HTML Structure

The section wraps a tall runway around one viewport-sized column. A small header row sits above the stack, then every asset lives inside a paired wrapper — an outer shell for the card and two inner faces for the front and back imagery:

<section class="mwg_effect074">
    <div class="pin-height">
        <div class="container">
            <div class="header">
                <p>High-end furniture</p>
                <p>Let’s collaborate</p>
            </div>
            <div class="medias">
                <div class="card">
                    <div class="card-face card-face-front">
                        <img src="./assets/medias/01.png" alt="">
                    </div>
                    <div class="card-face card-face-back">
                        <img src="./assets/medias/02.png" alt="">
                    </div>
                </div>
                <!-- duplicate .card for each extra pair -->
            </div>
        </div>
    </div>
</section>

On scroll, the stage stays pinned while the deck flips card by card, hinged along the lower edge like a trapdoor on the floor line.

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)