Background Fade Tested in IE6.0, Netscape8.1, Opera8.54, Firefox1.5.0.1 and AOL Explorer1.2

T his is a very cool effect that just sneaks up on you gradually. The page will fade from your choice of color to another choice of your color until it is done. It will not keep changing back and forth or anything. It will fade once until it reaches the prescribed color and stay there.

We have tested the code in IE6.0, Firefox1.5.0.1, Opera8.52, Netscape8.1 and AOL Explorer1.2. This script worked in IE and AOL Explorer1.2. All other platforms tested you will "Not" see the effect. It degrades well and you will not get any error messages.

D epending on your knowledge of HTML and Java scripts one step copy and paste code, that is inserted anywhere past the opening the <BODY> tag of your document. There is only one set of configurations you need to make and that is at the bottom of the code to set your colors and time frame for the action. You do need a color chart of RGB color values that you can find at the link at the bottom of the page.

Reconfigurations

T his is the default setting on the code which is located at the bottom part of the code.

// The first six values are RGB color values,
// and can be edited. (Ex. 255,255,255=white,
// 0,0,0=black). The seventh value is a time
// value, which can also be edited. (Ex.
// 1000=1 second).
fade(0,0,0, 255,255,255, 500);

// -->
</script>

T his default code is set to go from 0,0,0,(Black) to 255,255,255,(White) with the time set at 500 which is one half second before the transition starts.

O n this page itself (for obvious reasons) we altered the code to go from 255,255,255 (White) to0,0,0,(Black) and the time is set for 3000.

H ere is the example of this reconfiguration.

// The first six values are RGB color values,
// and can be edited. (Ex. 255,255,255=white,
// 0,0,0=black). The seventh value is a time
// value, which can also be edited. (Ex.
// 1000=1 second).
fade(255,255,255, 0,0,0, 3000);

// -->
</script>

T hat is about all there is to this code. Now one other thing that will make the page transition much better is to change the default color of the page itself to the first color in your transition. Doing this will make the transition effect not be in conflict with the default color of the page that is defined in the <BODY> section of your document and will look like this with your configurations in it.

<html>
<head>
<title>Background Fade</title>
</head>
<BODY bgcolor="#ffffff" text="#ffffff" link="#1e90ff" alink="#ffff00" vlink="#1e90ff">

T hese configurations are done in HEX code not to be confused with RGB codes that are needed in the script. These configurations are done within the advanced editor or pure HTML page. If you are in the basic editor in something like "Angelfire" just change the color in the color section of the editor.

R emember, to set your colors on the text and links to be able to be seen with the final color the page transitions to, not the color it starts with. If you are asking yourself why it is quite simple. If your page starts in "White" and fades to "Black" and your text is Black you won't see the text (Black on Black) does not work. A perfect example of this is when this page first opened all you saw were the words
"This Page Will Fade To Black".
The text was black and as the page transitioned to black those words vanished.
[ Hex And RGB Color Chart ]

W e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]

Search Our Site By Individual letter

[ A ] [ B ] [ C ] [ D ] [ E ] [ F ] [ G ] [ H ] [ I ] [ J-K ] [ L ]
[ M ] [ N-O ] [ P-Q ] [ R ] [ S ] [ T ] [ U-V ] [ W ] [ X-Y-Z ]

Little Tips Directory

[ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ]

[ Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
[ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
[ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ Form Index ]
[ 2001 ] [ 2002 ] [ 2003 ] [ 2004 ] [ 2005 ] [ 2006 ] [ 2007 ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [ Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.