013
Infinite scrolling movement
In this effect, we make a sentence scroll infinitely. To crank up the fun, we’ll speed up or rewind the sentence depending on the scroll direction. Let’s go!
HTML Structure
The DOM consists of a container with two identical sentences inside. This way, when the first sentence reaches the end, we’ll see the beginning of the next one before resetting the translation for a seamless effect.
<section class="mwg_effect013">
<div class="inner">
<div class="container">
<p class="phrase">Because we are your friend you'll bass boom</p>
<p class="phrase">Because we are your friend you'll bass boom</p>
</div>
</div>
</section>In my example, the .inner div has a slight CSS rotation, but this step is entirely optional.
