How to Change Text Color Character by Character

Note  As of December 2011, this topic has been archived and is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Windows Internet Explorer, see Internet Explorer Developer Center.

Letter-by-letter animation is very straightforward once you start thinking of each character as a separate entity rather than as a whole word. Changing text effects at the character level requires that each letter occupy a separate container, such as a div, span, or td. The choice between containers is a matter of whether you want a break after the element, as in a div, or no break, as with span and td.

This tutorial uses the table container to demonstrate color cycling effects for text. The code provided in this task transfers to any object you might want to use.

This task requires the following steps:

  1. Create an HTML table containing a cell for each object
  2. Design the default appearance of the table
  3. Prepare the elements for scripting
  4. Use the style object to code the color changes
  5. Write a switch statement to change colors
  6. Use a timer to govern the rate at which colors change

Create an HTML table containing a cell for each object

Think of it as one cell per text effect when constructing the table. The example shown in Step 3 includes a whole word in the first cell and a single character in each ensuing cell. What you include depends on what you are trying to communicate.

Design the default appearance of the table

Each cell inherits the Cascading Style Sheets (CSS) attributes of the table. Capitalize on this ability by setting font attributes here. If a CSS value contains multiple, nonhyphenated words, remember to enclose the value in quotation marks.

    table {
        font-family: "Comic Sans MS";
        font-size: 30pt;
        color: black;

Note that no cell width is specified thus far. All letters are equidistant, which could be a problem because separate words would run together. You can designate cell width by using a class for the affected cells. The sample, however, takes a shortcut that happens to fit the message. A marquee in a cell of the second row sets the width for the whole column. Consequently, "Dynamic" and "HTML" are appropriately offset.

Prepare the elements for scripting

The most common way to select an element from a document is with getElementById. Although multiple elements can have the same ID value, an ID should uniquely identify a single element on the page. In this case, we select the parent tr, since the cells we wish to animate are easily found in the cells of the object.

    <tr id="celColorChange">

The following script is all it takes to retrieve the cells collection.

 var celColorChange = document.getElementById('celColorChange').cells; 

Use the style object to code the color changes

We now write a function that loops through the array, setting the CSS color property equal to a variable. The example does so twice, once for looping upward (sColor2) and once for looping downward (sColor1). This way the colors change from left to right and vice versa.

function cycleColors()
    var celColorChange = document.getElementById('celColorChange').cells;
    if (bAscending)
        celColorChange[iCurrentCELL++].style.color = sColor2;
        if (iCurrentCELL == celColorChange.length)
            bAscending = false;
            iCurrentCELL = celColorChange.length;
        celColorChange[--iCurrentCELL].style.color = sColor1;

        if (iCurrentCELL == 0)
            bAscending = true;

Most of the variables in this function, such as bAscending and iCurrentCELL, are global so that they can maintain their values between iterations of the function. sColor1 and sColor2 are set by code in the following step.

Write a switch statement to change colors

In the example below, the changeColors function enforces four cases. Each case assigns a CSS color value to ascending and descending colors. Remember that the color property recognizes both color names and RGB color values. For more information, see Color Table.

function changeColors()
    switch (iColorLoop++)
    case 0:
    case 1:
    case 2:
    case 3:
    if (iColorLoop > 3)
        iColorLoop = 0;

Use a timer to govern the rate at which colors change

This is the most important step. Nothing would happen without an event to trigger the action, and a timer to call the action repeatedly. The example begins processing the script as soon as the document is loaded (onload event) and repeats the action every 100 milliseconds thereafter by setting a timer with setInterval.

<body onload="setInterval('cycleColors()',100)">

Code example:

Related topics

Changing Element Styles
DHTML Properties
Other Resources
Cascading Style Sheets (CSS)