Free JavaScript: Background Random Fader

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Smooth Background Random Fader
This is the world's smoothest JavaScript background fader! It makes the background color of your webpage constantly fade from dark to light or from light to dark or whatever you prefer. You may choose among 5 different fade-effects. The random generator continually changes the colors. Surprising animation to impress your visitors with almost zero bandwith. Copy and paste installation. Crossbrowser: Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x/4x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x.

Demo
Click here to see sample

Configuration
Step 1: Open your webpage. Paste the following code between the <head> and </head> tags of your webpage:

// IMPORTANT: 
// If you add this script to a script-library or a script-archive 
// you are required to insert a highly visible link to http://www.fabulant.com
// right into the webpage where the script
// will be displayed.

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION STARTS HERE
///////////////////////////////////////////////////////////////////////////

// Choose a fade effect by configuering the variable  fade_effect below:
// Set 1 if the background should fade from dark to medium and back to dark
// Set 2 if the background should fade from light to medium and back to light
// Set 3 if the background should fade from light to dark and back to light
// Set 4 if the background should fade from light to very light and back to light
// Set 5 if the background should fade from dark to very dark and back to dark
var fade_effect=4

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////

if (fade_effect==1) {
	var darkmax=1
	var lightmax=127
}

if (fade_effect==2) {
	var darkmax=127
	var lightmax=254
}

if (fade_effect==3) {
	var darkmax=1
	var lightmax=254
}

if (fade_effect==4) {
	var darkmax=200
	var lightmax=254
}

if (fade_effect==5) {
	var darkmax=1
	var lightmax=80
}
var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')

var redrgb=lightmax
var greenrgb=lightmax
var bluergb=lightmax

var redcol_1
var redcol_2 
var greencol_1 
var greencol_2 
var bluecol_1 
var bluecol_2 
 
var stepmax=3
var stepred=Math.ceil(stepmax*Math.random())
var stepgreen=Math.ceil(stepmax*Math.random())
var stepblue=Math.ceil(stepmax*Math.random())

function setrandomstep() {
	stepred=Math.ceil(stepmax*Math.random())
	stepgreen=Math.ceil(stepmax*Math.random())
	stepblue=Math.ceil(stepmax*Math.random())
}

Step 2: Open your webpage. Go to the top of the script-code and choose a fade-effect by setting the variable fade_effect.