How did they do that? Keystroke Text Animation

I found this website, and I can't figure out how they made the text animation on top work. It looks like jquery,开发者_运维百科 but I can't figure out the code. Does anyone know what they used to make the keystrokes appear on this website?

http://nine2011.9elements.com/

---

Have a look at this: http://www.burnmind.com/tutorials/typing/

The tutorial: http://www.burnmind.com/howto/how-to-create-a-typing-effect-an-eraser-effect-and-a-blinking-cursor-using-jquery

That seems like exactly what you were looking for.

---

Looks like they fill the 'canvas' section by writing one div (each with one letter) at a time, and deleting them one at a time, using a Timer (maybe 250ms?) for each action. All possible using JavaScript document manipulation; easier with jQuery though.

I can't find a really good tutorial on how to do it with vanilla JavaScript, and there's always cross-browser quirks, so you'll just have to play around if you want to do a similar effect.