019
Infinite scroll with deformation
In this effect, we will create an infinitely scrolling series of images. In addition to automatic scrolling, the user will be able to navigate through the images by scrolling or dragging. Depending on how intensely the user moves, we will slightly distort the image list by scaling it up. We've got a lot to do, so let's get started!
HTML Structure
The content division contains the list of images to be scrolled. The container division will extend in height depending on the intensity of the scroll and drag. You’ll notice the use of duplicate images. These duplicates will be used to achieve the infinite loop effect.
<section class="mwg_effect019">
<div class="container">
<div class="content">
<div class="media"><img src="./assets/medias/1.jpg" alt=""/></div>
<div class="media"><img src="./assets/medias/2.jpg" alt=""/></div>
<div class="media"><img src="./assets/medias/3.jpg" alt=""/></div>
...
<!-- duplicate -->
<div class="media"><img src="./assets/medias/1.jpg" alt=""/></div>
<div class="media"><img src="./assets/medias/2.jpg" alt=""/></div>
<div class="media"><img src="./assets/medias/3.jpg" alt=""/></div>
...
</div>
</div>
</section>