yairEO / letterer

breaks a DOM node text into separate letters

letterer

Breaks HTML into individual characters, and words, without messing up the semantic structure.

1.3 KB - uncompressed

Demo page

Basic use example:

<!-- ...previous page content... -->
<div id='test'>
	<h1>Will break this into letters and words</h1>
	<p>some text with a <a href='#'>link</a> in it</p>
</div>
<script>
    letterer( document.getElementById('test') );
</script>

The above will then turn into this HTML:

<div id='test'>
	<h1><word><letter>W</letter><letter>i</letter><letter>l</letter><letter>l</letter></word><letter> </letter><word><letter>b</letter><letter>r</letter><letter>e</letter><letter>a</letter><letter>k</letter></word><letter> </letter><word><letter>t</letter><letter>h</letter><letter>i</letter><letter>s</letter></word><letter> </letter><word><letter>i</letter><letter>n</letter><letter>t</letter><letter>o</letter></word><letter> </letter><word><letter>l</letter><letter>e</letter><letter>t</letter><letter>t</letter><letter>e</letter><letter>r</letter><letter>s</letter></word><letter> </letter><word><letter>a</letter><letter>n</letter><letter>d</letter></word><letter> </letter><word><letter>w</letter><letter>o</letter><letter>r</letter><letter>d</letter><letter>s</letter><letter></letter></word></h1>
	<p><word><letter>s</letter><letter>o</letter><letter>m</letter><letter>e</letter></word><letter> </letter><word><letter>t</letter><letter>e</letter><letter>x</letter><letter>t</letter></word><letter> </letter><word><letter>w</letter><letter>i</letter><letter>t</letter><letter>h</letter></word><letter> </letter><word><letter>a</letter></word><letter> </letter><word></word><a href="#"><word><letter>l</letter><letter>i</letter><letter>n</letter><letter>k</letter><letter></letter></word></a><word></word><letter> </letter><word><letter>i</letter><letter>n</letter></word><letter> </letter><word><letter>i</letter><letter>t</letter></word></p>
</div>

The script recursively runs over the initial DOM node's children. It's pretty lightweight and does not require any 3rd party library. Note that a class is added to each letter in the break down process, for CSS transition effects purposes. (I believe it's better to remove a class then to add one for an initial transition effect).

After things have been broken down, you can pretty much just go over all the letters with a timer and a loop and remove their added class, like so:

var letters, i, totalLetters
	delay = 0,
	delayJump = 30;

// get all "letter" elements
letters = lettersContainer.getElementsByTagName('letter');
totalLetters = letters.length;

for( i=0; i < totalLetters; i++ ){
	doTimer(letters[i], delay);
	delay += delayJump;
	// if the letter is a "comma" then do a little pause, for some delay.
	if( letters[i].innerHTML == ',' )
		delay += delayJump * 6;
}

function doTimer(letter, delay){
	setTimeout(function(){ 
		letter.removeAttribute('class');
	}, delay);
}