Join
Join

001Card stack

For this effect, I tried to replicate the movement of a stack of cards spreading and sliding across a surface. How does it work? We’ll pin a division during a scrolling distance and move its child horizontally at the same time. Let’s begin!

HTML Structure

The HTML structure of the effect remains relatively simple. I declared a container as the parent of the section that will hold all my cards.

<section class="mwg_effect001">
    <div class="container">             
        <div class="cards">
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
        </div>
    </div>
</section>

Become a member to unlock
the full effect today.

Join now

Discover the platform

See how the platform works: try Effect #000 for free.

Try it now

(No registration or credit card needed)