026
Infinite 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>