Join Join
Join

101Sine Wave Z Gallery

In this effect, we'll scroll through a gallery of images stacked one behind the other. The wheel advances the loop in depth while each tile shifts along a sine curve. The stronger the scroll, the wider the wave spreads. Shall we see how it works? Let's go!

HTML Structure

Our DOM is split in two parts. The container holds the visible tiles: their sources stay empty for now, since we'll assign them in JavaScript:

<section class="mwg_effect101">
    <div class="container">
        <img class="media" src="" alt=""/>
        <img class="media" src="" alt=""/>
        <img class="media" src="" alt=""/>
        …
    </div>

The medias-loader division lists every asset URL we need upfront. We'll read from it, but these images never appear on stage:

    <div class="medias-loader">
        <img src="./assets/medias/01.png" alt="">
        <img src="./assets/medias/02.png" alt="">
        <img src="./assets/medias/03.png" alt="">
        …
    </div>
</section>

Become a member to unlock
the full effect today.

Join now Join now

Discover the platform

See how the platform works: try Effect #000 for free.

Try it now Try it now

(No registration or credit card needed)