050
Infinite fullscreen scroll
In this effect, we will scroll through fullscreen images in the form of an infinite zoom. The progression will be controlled by the user's scroll, and it will even be possible to go backward. Shall we see how it works? Let's go!
HTML Structure
Our DOM will consist of a medias division that will contain all the images to be loaded. The container division will hold the 8 images that will scroll, with their URLs updating dynamically.
<section class="mwg_effect050">
<div class="medias">
<img src="./assets/medias/1.jpg" alt="">
<img src="./assets/medias/2.jpg" alt="">
<img src="./assets/medias/3.jpg" alt="">
...
</div>
<div class="container" aria-hidden="true">
<img src="" class="real-image" />
<img src="" class="real-image" />
<img src="" class="real-image" />
<img src="" class="real-image" />
<img src="" class="real-image" />
<img src="" class="real-image" />
<img src="" class="real-image" />
<img src="" class="real-image" />
</div>
</section>