Join
Join

019Infinite 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>

Become a member to unlock
the full effect today.

Join now

Discover the platform

See how the platform works: try Effect #000 for free.

Try it now

(No registration or credit card needed)