Text Fading with Color Selection

Posted by martin on 1 Aug 2001, last updated on 14 Sep 2002.

Example and explanation of JavaScript fading text in selectable color. Fade speed can also be customized.

Compatibility

• This script requires a DHTML capable browser that means JavaScript and CSS support is required
• It works in Opera 5, all Gecko based browsers (Netscape 6, Mozilla, Galeon, SkipStone), and IE 5
• If you want to make this script NN/IE 4 compatible you'll have to change the div to a (these browsers do not support event handling for all elements)

Example of the script

Just point your mouse over the text to see it fading in and then back out when you move it away.

Select color to fade:

• red
• green
• blue
• yellow
• aqua
• fuchsia

Explanation

Styles

First you may apply a simple style to the element like this one for example:

#fader {
	text-align : center;
	color : rgb(0, 0, 0);
}

The HTML code

<div id="fader" onmouseover="fadeIn(this)"
	onmouseout="fadeOut(this)">
Some example text that will fade in and out
</div>

<p>Select color to fade:</p>

<ul>
	<li><a href="#" title="select red"
		onclick="setColor(30, 0, 0);return false"
		style="color : red">red</a></li>
	<li><a href="#" title="select green"
		onclick="setColor(0, 30, 0);return false"
		style="color : green">green</a></li>
	<li><a href="#" title="select blue"
		onclick="setColor(0, 0, 30);return false"
		style="color : blue">blue</a></li>
	<li><a href="#" title="select yellow"
		onclick="setColor(30, 30, 0);return false"
		style="color : yellow">yellow</a></li>
	<li><a href="#" title="select aqua"
		onclick="setColor(0, 30, 30);return false"
		style="color : aqua">aqua</a></li>
	<li><a href="#" title="select fuchsia"
		onclick="setColor(30, 0, 30);return false"
		style="color : fuchsia">fuchsia</a></li>
</ul>

The id is used to identify the element which we want to change, and we use its onmouseover and onmouseout event handlers.

Then we create an unordered list which is used to set the color which will be faded in/out, I used the onclick handler to invoke a JavaScript function which does the trick.

The JavaScript itself

Define some global variables, r, g, b represent the current red, green and blue components of the element color. chR, chG, chB equal the step with which the colors will fade and fader is the object which we handle, timer a reference to a previous set timeout which we should cancel before invoking a new one.

var r = g = b = 0;
var chR = 30;
var chG = chB = 0;
var fader = null;
var timer = null;

This function handles the fading color change by the unordered list of choices. It sets the global variables to the values passed to the function, because you cannot set global variables within an event handler (well at least not in all browsers). The last line is needed because colors often get out of range and it might cause your script to stop reinvoking itself.

function setColor(R, G, B) {
	chR = R;
	chG = G;
	chB = B;
	r = g = b = 0;
}

A wrapper function that calls fadeReal with positive parameters to start fading in. The first thing to do is check whether the browser has created the style object for the element we want to handle( the only browser that supports CSS dynamic changing but does not create this object is NN 4 but anyway it does not support onmouseover and onmouseout events for the div element so it discard it).

The next thing we have to do is assign the value of the element reference to a global variable (so that our code can be easily reused in other scripts). We check if there is a timer already set and clear it if this is the case. Last but not least call the function that does the hard work.

function fadeIn(obj) {
	if ( obj.style ) {
		fader = obj;
		if (timer)
			clearTimeout(timer);
		fadeReal(chR, chG,chB)
	}
}

This is the other wrapper function that calls fadeReal but this time with negative parameters which causes fading out.

function fadeOut(obj) {
	if ( obj.style ) {
		fader = obj;
		if (timer)
			clearTimeout(timer);
		fadeReal(-chR,-chG,-chB)
	}
}

This is the function that does all the work. First three lines update the global variables used to store the current red, green and blue components of the color of the element. Then a simple check for out of range color values if all goes well we set the element color to the new one and set a timer to invoke the same function with the same parameters in 100ms (that's 1/10 of a second).

function fadeReal(chR, chG, chB) {
    r += chR;
    g += chG;
    b += chB;

    if ( ( r >= 0 ) && ( r < 256 ) &&
    ( g >= 0 ) && ( g < 256 ) &&
    ( b >= 0 ) && ( b < 256 ) ) {
        fader.style.color =
            "rgb(" + r + "," + g + "," + b + ")";
        timer = setTimeout
            ("fadeReal(" + chR + "," + chG + "," + chB + ")", 100);
    }
}

If you want to copy the script from the HTML output you may have to concatenate some lines which were separated for better visual look( you don't like to scroll to be able to read the text and script do you) but you can save yourself lots of time and efforts by downloading all of it directly.

Comments