Fading in text using JavaScript and the DOM

Introduction

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 JavaScript and DHTML what Flash have "been there done that" with - fade text gradually into view, brought to you by the new DOM of IE5 and NS6.

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:

document.getElementById("test").style.color="#008000"
//change color to green

Here, a textual element with ID "test" has its color transformed 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!

<script type="text/javascript">
hex=255 // Initial color value.


function fadetext(){ 
  if(hex>0) { //If color is not black yet

    hex-=11; // increase color darkness

    document.getElementById("sample").style.color=
                      "rgb("+hex+","+hex+","+hex+")";
    setTimeout("fadetext()",20); 
  }
  else
    hex=255 //reset hex value

}

</script>

<div id="sample" style="width:100%"><h3>John slowly faded into view</h3></div>
<button onClick="fadetext()">Fade Text</button>

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! Check out Fading Scroller from Dynamic Drive for a practical example of this.