034
Different speed columns
In this effect, we’ll create columns of images that scroll at different speeds based on user scroll. Each column will have its own height and loop seamlessly to create an infinite scrolling effect. Let’s dive in!
HTML Structure
Each column consists of a container and a series of images. The images are duplicated to create a seamless loop. I also specify the width and height for each image to ensure the correct aspect ratio before loading, preventing layout shifts.
<div class="col">
<div class="container container1">
<img class="media" width="706" height="854" src="01.png" alt="">
<img class="media" width="707" height="854" src="02.png" alt="">
<img class="media" width="926" height="719" src="03.png" alt="">
...
<!-- Duplicate images -->
<img class="media" width="706" height="854" src="01.png" alt="">
<img class="media" width="707" height="854" src="02.png" alt="">
<img class="media" width="926" height="719" src="03.png" alt="">
...
</div>
</div>