This effect displays a list of images that continuously rotate around a large circle based on the user’s scroll. The faster the scroll, the more certain images will drift away from their orbit. Let’s dive in!
HTML Structure
The HTML structure is fairly simple: each media element has a parent that matches the container
's size. The container
extends beyond the screen to create a curved path effect.
<section class="mwg_effect023">
<div class="container">
<div class="inner-media">
<img class="media" src="./assets/medias/01.png" />
</div>
<div class="inner-media">
<img class="media" src="./assets/medias/02.png" />
</div>
...
</div>
</section>