Join
Join

028Rotation on drag

This effect presents an infinite list of items that the user can scroll through by dragging. As they do so, the items experience a slight rotation based on the direction of the movement. Let’s take a look! Ready?

HTML Structure

The structure of the effect is relatively simple. The images are inside a container. Notice that the list of items is duplicated to achieve this seamless and infinite effect. We'll come back to this shortly.

<section class="mwg_effect028">
    <div class="container">
        <div class="card"><img src="./assets/medias/1.png" alt=""></div>
        <div class="card"><img src="./assets/medias/2.png" alt=""></div>
        <div class="card"><img src="./assets/medias/3.png" alt=""></div>
        ...
        <!-- Duplicate for the infinite loop -->
        <div class="card"><img src="./assets/medias/1.png" alt=""></div>
        <div class="card"><img src="./assets/medias/2.png" alt=""></div>
        <div class="card"><img src="./assets/medias/3.png" alt=""></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)