JavaScript Page Background Fade Effect

Page Background Fade Effect

HOW TO

The background fade effect can be easily accomplished by using JavaScript. The concept is this:

Pick an initial color to start with.

Pick a target color to end with.

Decide how many steps (how long) the fade will be.

Loop through the following:

Change the bgColor color, using "document.bgColor" proprety

Increment the color values.

If current color is the target color, then it's time to stop.

Here's the syntax to change bgColor property:
document.bgColor="#"+hexRed+""+hexGreen+""+hexBlue;
where hexRed, hexGreen, hexBlue are hexadecimal values of the color.

EXAMPLE

Enter the RGB numbers in decimal (between 0 to 255). Then press Fade.

Color
From To

Red

Green

Blue

Fade in How Many Steps:

CODE

View the code to see what is going on. There are 3 functions:

function startFadeDec(startingRed, startingGreen, startingBlue,
endingRed, endingGreen, endingBlue, numSteps)

This is the function that should be called to start the fading process. It takes the RGB values of the starting and ending colors (in decimal), and also the number of steps (more steps means longer sequence).

function fade()

This function is the loop function that performs the actual color calculation and then change the background color.

function decToHex()

This function converts decimal to hex, and it's being called by fade().

NOTES

To make the page fade immediately after the document is loaded, call the function in the BODY's "onLoad" event handler:
```
<BODY onLoad="startFadeDec(
  startingRed, startingGreen, startingBlue,
  endingRed, endingGreen, endingBlue, numSteps)">
```
When setting the background color from JavaScript, don't use quote signs to enclose the RGB values. That is, don't set it by document.bgColor="#666666", instead, use document.bgColor=#666666.
Don't set the bgColor using this kind of code:
```
document.bgColor="\"#"+hexRed+""+hexGreen+""+hexBlue+"\"";
```
That won't work on some browsers. Omit the quotes like this instead:
```
document.bgColor="#"+hexRed+""+hexGreen+""+hexBlue;
```
```
 
```

<< INDEX >>

permadi@permadi.com