You may have noticed the animated text I have on the homepage of this site, with the greetings in various languages.
Here we'll see how you can do the same on your site in less than 1 kilobyte of code.
You are free to copy, modify and use this code as you wish.
This effect looks great with either fixed-width fonts or weird looking geometric fonts.
On my homepage, I used the Forte Line font, which is free for personal and commercial use, good looking and very lightweight (14kb WOFF).
Another good choice could be a pixelated terminal font such as this Commodore 64 font, which is also free and lightweight (44kb WOFF).
An array (texts) stores all the possible strings, and a pointer (currentText) points to the current target string.
A variable (areaText) stores whatever is being currently displayed.
Two timers are periodically called: one swaps a random character (by default, every 50ms), while the other one changes the target string (by default, every 4 seconds). Padding is added when needed.
It's simple, but creates a nice effect.
To start the animation, all you need is a target element and a bunch of strings that you want to show.
By default, it will change the target string every 4 seconds, and a character every 50 ms.