Join
Join

034Different 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>

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)