007
Rounded trajectory
In this effect, we will scroll images as if they were following a rounded trajectory. In reality, each image will be positioned at the edge of a large division that extends beyond the viewport. We’ll simply rotate this division to create the desired effect. Ready to roll up your sleeves? Let’s go!
HTML Structure
The container will remain pinned while the user scrolls through the entire height of the pin-height division. Each image will be a child of a circle division, which will rotate.
<div class="pin-height">
<div class="container">
<div class="circle">
<img class="media" src="./assets/medias/1.png" alt="">
</div>
<div class="circle">
<img class="media" src="./assets/medias/2.png" alt="">
</div>
...
</div>
</div>