Join Join
Join

103Depth Wave Gallery

In this effect, we'll drag a gallery of images across the screen. Each tile travels horizontally while rising and falling in depth along a sine wave, then snaps into place when we let go. Let's see how it works!

HTML Structure

Our DOM is split in two parts. The container holds the visible tiles we'll animate on stage:

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

Their sources stay empty for now, we'll assign them in JavaScript. Each tile is a wrapper around a single image so we can animate the frame and the bitmap independently.

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)