042
Smooth stacking images
In this effect, we will reveal a series of cards one by one. As soon as one card disappears, the remaining deck moves up towards us. The progression will happen as the user scrolls. Shall we take a look at it? Let’s go!
HTML Structure
The structure is relatively simple here. The container division will remain pinned on the full height of the pin-height division. The images will be children of the medias division.
<div class="pin-height">
<div class="container">
<div class="medias">
<img class="media" src="./assets/medias/1.png" alt="">
<img class="media" src="./assets/medias/2.png" alt="">
<img class="media" src="./assets/medias/3.png" alt="">
...
</div>
</div>
</div>