046
Letter by letter
In this effect, we will see how to make a sentence appear letter by letter in a random order as the user scrolls, while keeping the content pinned. This type of effect can be useful for grabbing the visitor's attention on a phrase or concept. Let’s roll up our sleeves and get started!
HTML Structure
The structure is very simple here: we will pin the container div to the entire height of the pin-height div as the user scrolls. The text will be inside a p tag. Each letter will be dynamically wrapped in a span using JavaScript, so we don’t have to do it manually.
<div class="pin-height">
<div class="container">
<p class="sentence">Our chairs are way more than furniture.</p>
</div>
</div>