Join
Join

027Letter by letter

In this effect that I really enjoy, we’ll animate the letters of a word as the user scrolls. Each word will act as a mask to hide a letter and reveal its duplicate. 3, 2, 1, let’s go!

HTML Structure

Each line of my effect will be contained in a list. For each letter, there will be two versions: the one initially visible and the one that exits through the mask.

aa

Here’s the complete structure of the effect:

<ul>
    <li>
        <span class="letter"><span>L</span><span>L</span></span>
        <span class="letter"><span>e</span><span>e</span></span>
        ...
    </li>
    <li>
        <span class="letter"><span>T</span><span>T</span></span>
        <span class="letter"><span>w</span><span>w</span></span>
        ...
    </li>
    ...
</ul>

To create a space between two words on the same line, notice the use of & nbsp;, a non-breaking space.

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)