CSS spell animations

Question

I have a <div> with text.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

I would like the text in this <div> appear on the page one character at a time:

  L

 Lo

 Lor

 ... and so on, until the full text is visible

A valid alternative is to do this one word at a time to avoid problems with HTML objects and jumping words due to soft hyphenation.

If the user clicks on the <div> , he must cancel the animation and instantly display the full text.

In short, I want to imitate the animation that is often found in Japanese-style adventure games. (I think this is sometimes called a typewriter or teletype effect.) Here is a good example:

http://www.youtube.com/watch?feature=player_detailpage&v=SasgN0lim7M#t=418

Obviously, I can script animation using JavaScript - just set a timer and add letters (or words) one by one.

But is it possible to do what I need with CSS in modern browsers? (Of course, I need to at least change the class of the element in onclick using JS, but that's OK.)

Update: to clarify characters and letters and problems with HTML objects:

My text is littered with HTML:

 Lo&shy;rem <i>ip&shy;sum</i>. 

A naive approach with adding text to the innerHTML character will not work:

  L

 Lo

 Lo &

 ... Doh!

Answer 1

Unfortunately, you cannot do this with CSS, so you have to revert to a pure JS approach.

As your comments explained, you need your text to contain some HTML markup, so I suggest a roll-call animation that will be the easiest way to handle this. Something like that:

 var timer, fullText, currentOffset, onComplete, wordSet; function Speak(person, text, callback) { $("#name").html(person); fullText = text; wordSet = text.split(" "); currentOffset = 0; onComplete = callback; timer = setInterval(onTick, 300); } function onTick() { currentOffset++; if (currentOffset == wordSet.length) { complete(); return; } var text = ""; for(var i = 0; i < currentOffset; i++){ text += wordSet[i] + " "; } text.trim(); $("#message").html(text); } function complete() { clearInterval(timer); timer = null; $("#message").html(fullText); if (onComplete) onComplete(); } $(".box").click(function () { complete(); }); Speak("Simon", "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", function () { setTimeout(function () { Speak("Javascript", "Simon has finished speaking!"); }, 2000); }); 

Here is a working example

NOTE This code can be significantly restructured to be more efficient and concise, but it should fully demonstrate the concept.

---

I also created a spell example . Although it does not support your html markup needs, it looks better, so maybe you can adapt it to work for you.

Answer 2

You can achieve this with jQuery.

Check out my fiddle: http://jsfiddle.net/kA8G8/7/

HTML

 <p class="typewriter">Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p> 

Js

 var text = $('.typewriter').text(); var length = text.length; var timeOut; var character = 0; (function typeWriter() { timeOut = setTimeout(function() { character++; var type = text.substring(0, character); $('.typewriter').text(type); typeWriter(); if (character == length) { clearTimeout(timeOut); } }, 150); }()); 

Answer 3

There is a pure CSS trick for this.

Use a mask element, even a p:before or p:after pseudo element with a higher z index than your text element. Give it the same color as the background text and line height. Put it in an absolute position just above the text.

Then you just need to revive it so that it moves to the right, exposing the letter. This is just a workaround, because if you have a complex background under the text, such as an image, then this trick is difficult to reproduce, because you have to match the background image with the masking element.