001
Card 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>