022
Progressive sentences
In this effect, we will make multiple paragraphs appear word by word to keep the user engaged while scrolling through the page. The idea is to make the words of one paragraph disappear at the same time as the words of the next paragraph appear.
Our approach will be dynamic: if we decide to add one or more paragraphs, the effect will continue to work seamlessly. Thank you, JavaScript!
HTML Structure
The structure is relatively simple: the container division contains the various paragraphs we will animate.
<div class="pin-height">
<div class="container">
<div class="paragraphs">
<p class="paragraph">NeoSwiss® is a new font aiming ...</p>
<p class="paragraph">Inspired by Helvetica, it preserves ...</p>
<p class="paragraph">With exceptional legibility and a ...</p>
</div>
</div>
</div>