024
Opposite 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>