Fading in text using the DOM

Fading
backgrounds may no longer be the rage, but fading text in all likelihood
will prove a lot more enduring. Below we will do with scripting what Java
and Flash have "been there done that" with- fade text gradually into view
Brought to you by the new
DOM
of IE5 and NS6.

Example (IE5 or NS6 required to view):

General idea

Let's take a quick trip down memory lane. To change the
document's background color, the code to use is:

document.bgColor="#000000" //change color to black

Oh yeah, haven't seen that in a long time. A background
fade is created merely by incessantly calling this code to gradually
change the color from one extreme to another.

Moving on, dynamically changing the text's color was never
historically possible. The new DOM of IE5/NS6 changes that:

Here a textual element with ID "test" has its color
tranformed to green.

Fading text technique

Believe it or not, the time is ripe to tackle the main
subject. What we want is a script that continuously changes the text
color, so as to achieve that nifty fade effect. The trickiest part of it
in our opinion is in fact figuring out the hexadecimal equivalent of color
values!

John slowly faded into view

Notice how we can use rgb values to denote the color,
which comes in handy with the application at hand. By changing the value
from 255 slowly to 0, we have a fade from white to black!

-Fading colors other than black

Sometimes you may wish to fade from white to a color other
than black. A popular one is to blue, useful in fading in a text link, for
example. Determining the hex equivalent of colors is definitely not a job
intended for us humans. I suggest using a graphics program such as
Paint Shop Pro, and launching the color palette for the task. Drag
around the mouse to get the various shades of any color, plus their hex
number.

Copyright (c) 1997-2015 JavaScript Kit. NO PART may be reproduced without author's permission.