009
Up & Down
In this effect, we will display several short phrases letter by letter to keep the user's attention as they scroll through the page. The idea is to make the letters of one phrase disappear at the same time as the letters of the next phrase appear. Our logic will be dynamic: if we want to add one or more phrases, the effect will continue to work. Thanks a lot, JavaScript!
HTML Structure
The structure here is fairly simple: the container division holds the different phrases we will animate.
<div class="pin-height">
<div class="container">
<div class="center">
<div class="sentence">"The Red Planet</div>
<div class="sentence">may have once</div>
<div class="sentence">fostered life.</div>
<div class="sentence">Isn't it crazy?"</div>
</div>
</div>
</div>