Join
Join

024Opposite direction marquees

In this effect, we will infinitely scroll two phrases in opposite directions. As the user scrolls, the first phrase will disappear to reveal the second. Let’s see how to achieve this result!

HTML Structure

The structure is relatively simple here. Each phrase is contained within a container, which will remain pinned while the user scrolls.

<div class="pin-height">
    <div class="container">
        <div class="sentence sentence1">
            <p>Get your ticket now... Get your ticket now...</p>
        </div>
        <div class="sentence sentence2">
            <p>Get your ticket now... Get your ticket now...</p>
        </div>
    </div>
</div>

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)