Join Join
Join

054Pinned flip stack

In this effect, images scroll along the shape of a cylinder. Multiple depth layers then create a parallax effect. Let’s roll up our sleeves and dive in!

HTML Structure

The markup is straightforward. A tall pin-height wrapper sets the scroll distance, and a container inside it will be pinned while we animate. Each image sits in its own media div:

<section class="mwg_effect054">
    <p class="scroll">Scroll</p>
    <div class="pin-height">
        <div class="container">
            <div class="media">
                <img src="assets/medias/01.png" alt="">
            </div>
            <div class="media">
                <img src="assets/medias/02.png" alt="">
            </div>
            <div class="media">
                <img src="assets/medias/03.png" alt="">
            </div>
            ...
            <div class="media">
                <img src="assets/medias/21.png" alt="">
            </div>
        </div>
    </div>
</section>

Each image lives inside its own media wrapper. We rotate the wrapper on the X axis while the img keeps the initial card-on-edge pose from CSS. Duplicate the media block for every asset we want on the cylinder.

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)