Click here to Skip to main content
Click here to Skip to main content

Fading in text using JavaScript and the DOM

, 15 Mar 2004
Rate this:
Please Sign up or sign in to vote.
See how to use JavaScript to dynamically fade text in and out.

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

George is the webmaster of JavaScript Kit (http://www.javascriptkit.com), a comprehensive site featuring tutorials and scripts on JavaScript, DHTML, CSS, and web design. He also mantains the developer's help forum CodingForums.com.


Comments and Discussions

 
GeneralMy vote of 1 Pinmemberrichardhenwood20-Sep-10 23:10 
Generaltransformers.... PinmemberTCDooM15-Mar-04 23:42 
GeneralRe: transformers.... PinmemberJavaScript Kit16-Mar-04 18:43 
GeneralRe: transformers.... PinsussAnonymous17-Mar-04 1:38 
GeneralRe: transformers.... PinmemberJavaScript Kit17-Mar-04 4:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141216.1 | Last Updated 16 Mar 2004
Article Copyright 2004 by JavaScript Kit
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid