Join
Join

026Infinite grid

For this effect, we will create an infinite two-dimensional grid. The user will be able to scroll or drag in any direction to explore it. Let's see how we can achieve this great result in just a few steps! Let's get started!

HTML Structure

The DOM consists of a list of images and 3 duplicates. These duplicates serve as copies to achieve the "infinite" effect. Note the use of the aria-hidden="true" attribute on the duplicates, which informs screen readers to ignore these divisions.

<section class="mwg_effect026">
    <p>all our iconic lamps (scroll everywhere)</p>
    <div class="container">
        <div class="content">
            <div class="media"><img src="./assets/medias/16.png" alt=""></div>
            <div class="media"><img src="./assets/medias/02.png" alt=""></div>
            <div class="media"><img src="./assets/medias/03.png" alt=""></div>
            ...
        </div>

        <!-- duplicates -->
        <div class="content" aria-hidden="true">
            <div class="media"><img src="./assets/medias/16.png" alt=""></div>
            <div class="media"><img src="./assets/medias/02.png" alt=""></div>
            <div class="media"><img src="./assets/medias/03.png" alt=""></div>
            ...
        </div>
        <div class="content" aria-hidden="true">
            <div class="media"><img src="./assets/medias/16.png" alt=""></div>
            <div class="media"><img src="./assets/medias/02.png" alt=""></div>
            <div class="media"><img src="./assets/medias/03.png" alt=""></div>
            ...
        </div>
        <div class="content" aria-hidden="true">
            <div class="media"><img src="./assets/medias/16.png" alt=""></div>
            <div class="media"><img src="./assets/medias/02.png" alt=""></div>
            <div class="media"><img src="./assets/medias/03.png" alt=""></div>
            ...
        </div>
    </div>
</section>

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)