028
Rotation 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>