037
Fading transition
In this effect, we’ll make a series of images appear using a gradient as a mask. The whole effect will be tied to the user’s scroll progress. 3, 2, 1… let’s go!
HTML Structure
We’ll set a height on the pin-height div, which determines the scroll distance needed to reveal all the images. Meanwhile, the container div will remain pinned. The images will be wrapped inside a hidden div, which is where we’ll apply our mask.
<div class="pin-height">
<div class="container">
<div class="images">
<div class="hidden"><img class="media" src="./assets/medias/1.png"></div>
<div class="hidden"><img class="media" src="./assets/medias/2.png"></div>
<div class="hidden"><img class="media" src="./assets/medias/3.png"></div>
...
</div>
</div>
</div>