Join
Join

046Letter 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>

Become a member to unlock
the full effect today.

Join now

Discover the platform

See how the platform works: try Effect #000 for free.

Try it now

(No registration or credit card needed)