027
Letter 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.
aaHere’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.
