Join Join
Join

117Parallax Word Gallery

In this effect, we will click through a series of words. Each click swaps the label and scatters a fresh set of images in depth around it, while the cursor gently shifts them in parallax. Let's begin!

HTML Structure

The structure of the effect is relatively simple. Inside the stage, we place three empty depth layer divisions. Images will be appended into them later from JavaScript:

<section class="mwg_effect117">
    <p class="title">Areas of work</p>
    <div class="stage">
        <div class="medias" aria-hidden="true">
            <div class="layer layer--0"></div>
            <div class="layer layer--1"></div>
            <div class="layer layer--2"></div>
        </div>

Next to the layers, a words division stacks every label we want to cycle through, and a pager lets us jump to a specific slide:

        <div class="words">
            <p class="word">Sport & Outdoor</p>
            <p class="word">Architecture</p>
            <p class="word">Travel & Tourism</p>
            <p class="word">Lifestyle</p>
            <p class="word">Interior Design</p>
        </div>
        <ul class="pager">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

Finally, a hidden media-pool lists every image URL, grouped by slide. We will read from it, but these images never appear on stage:

    <div class="media-pool" aria-hidden="true">
        <div>
            <img src="./assets/medias/1_1.png" alt="">
            <img src="./assets/medias/1_2.png" alt="">
            …
        </div>
        <div>
            <img src="./assets/medias/2_1.png" alt="">
            …
        </div>
        …
    </div>
</section>

Become a member to unlock
the full effect today.

Join now Join now

Discover the platform

See how the platform works: try our free effects.

Try it now Try it now

(No registration or credit card needed)