Old browser

This article shows off HTML5 features, don't you think it would be a good idea to read it with a browser that supports these features so you can see them?

Letter changing animated text

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.

First of all: find the right font

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).

Code

Parameters
  • target: the element used to display the text (usually a div)
  • texts: an array with all possible strings
  • changeInterval (optional, default 4000): time between string changes in ms
  • updateInterval (optional, default 50) : time between character changes in ms
  • onTextChanged (optional): a callback function called when a character is changed (useful for animations)
How it works

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.

How to use it

Initialization

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.

new AnimatedText(document.getElementById("myDiv"),["String 1","String 2","String 3"]);
The object returned by this function can be used later to stop the animation with the stop() function.
Usage tips
  • Use short strings, this effect is most useful for titles and similar stuff, as it grabs the attention
  • If you're using long strings, increase changeInterval and/or lower updateInterval
  • It is a good idea to have fixed height containers, because the displayed text varies in length

Example 1: Simple example

HTML
<div id="example1"></div>
JS
new AnimatedText(I("example1"),["String","Other String","Text","Characters","More text","Example"]);
Result

Example 2: Terminal style

CSS
#example2{
  display:block;
  font-family:'Commodore';
  font-size:1.2em;
  background-color:#000000;
  color:#90c070;
  overflow:hidden;
  line-height:3em;
  height:4em;
  padding:0.7em;
  text-shadow:0 0 0.2em #90c070;
}
HTML
<div id="example2"></div>
JS
new AnimatedText(I("example2"),["Terminal","rm -rf /","Commodore","GNU+Linux","C:\\>","Delete System32","LOAD \"*\",8,1"]);
Result

Example 3: Glowing animation

CSS
#example3{
  display:block;
  text-align:center;
  font-family:'ForteLine';
  font-size:3em;
  color:#FFFFFF;
  overflow:hidden;
  line-height:3em;
  height:4em;
  text-shadow:0 0 0.2em #c6eeff;
  animation:glow 0.4s linear;
}
@media all and (max-width:50em){
  #example3{
    font-size:5vw;
  }
}
@keyframes glow{
  15%{text-shadow:0 0 0.2em #ffffff,0 0 0.6em #c6eeff,0 0 1em #c6eeff}
}
HTML
<div id="example3"></div>
JS
new AnimatedText(document.getElementById("example3"),["String","Other String","Text","Characters","More text","Example"],4000,50,function(){
//this restarts the glow animation when the text is changed
  var x=document.getElementById("example3");
  var p=x.parentElement;
  p.removeChild(x);
  p.appendChild(x);
});
Result

Download

Download JS code
The code shown here is compatible with IE9+ and any modern browser.

Share this article

Comments