Untitled Document

Gradient Background Fader
This script creates a smooth and stunning gradient background animation between two colors. Easy configuration of colors. Internet Explorer 5x/6x or higher. Credits: author of the script is Peter Gehrig founder of www.24fun.com

Configuration:

Step 1: Open your webpage that will display your gradient background fader. Use a simple texteditor (NotePad or WordPad). Frontpage, Dreamweaver, GoLive or Word are not recommended. Insert the following code between the -tag and -tag:

<script>
// CREDITS:
// Gradient Background Fader
// By Peter Gehrig
// Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com
// info@24fun.com
// 10/15/2003 http://www.javascripts.com

// select the two background-colors
var colorhexafrom="#FFFF00"
var colorhexato="#00CCCC"

// do not edit code below this line
var pausebetweencolors=500
var i_loopmax=9999999999
var i_stepmax=20
var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')
var redcol_1
var redcol_2 
var redcol_1_b
var redcol_2_b 
var greencol_1 
var greencol_2 
var greencol_1_b 
var greencol_2_b
var bluecol_1 
var bluecol_2 
var bluecol_1_b 
var bluecol_2_b
 
var rgbredfrom
var rgbgreenfrom
var rgbbluefrom
var rgbredto
var rgbgreento
var rgbblueto
var rgbrednow
var rgbgreennow
var rgbbluenow

var rgbredfrom_b
var rgbgreenfrom_b
var rgbbluefrom_b
var rgbredto_b
var rgbgreento_b
var rgbblueto_b
var rgbrednow_b
var rgbgreennow_b
var rgbbluenow_b

var i_step=1
var i_loop=0

function translateintorgb() {
	var hexa=colorhexafrom
	var hexared=hexa.substring(1,3)
	var hexagreen=hexa.substring(3,5)
	var hexablue=hexa.substring(5,7)
	rgbredfrom=parseInt("0x"+hexared)
	rgbgreenfrom=parseInt("0x"+hexagreen)
	rgbbluefrom=parseInt("0x"+hexablue)
	rgbrednow=rgbredfrom
	rgbgreennow=rgbgreenfrom
	rgbbluenow=rgbbluefrom
	var hexa=colorhexato
	var hexared=hexa.substring(1,3)
	var hexagreen=hexa.substring(3,5)
	var hexablue=hexa.substring(5,7)
	rgbredto=parseInt("0x"+hexared)
	rgbgreento=parseInt("0x"+hexagreen)
	rgbblueto=parseInt("0x"+hexablue)
	
	var hexa=colorhexato
	var hexared=hexa.substring(1,3)
	var hexagreen=hexa.substring(3,5)
	var hexablue=hexa.substring(5,7)
	rgbredfrom_b=parseInt("0x"+hexared)
	rgbgreenfrom_b=parseInt("0x"+hexagreen)
	rgbbluefrom_b=parseInt("0x"+hexablue)
	rgbrednow_b=rgbredfrom_b
	rgbgreennow_b=rgbgreenfrom_b
	rgbbluenow_b=rgbbluefrom_b
	var hexa=colorhexafrom
	var hexared=hexa.substring(1,3)
	var hexagreen=hexa.substring(3,5)
	var hexablue=hexa.substring(5,7)
	rgbredto_b=parseInt("0x"+hexared)
	rgbgreento_b=parseInt("0x"+hexagreen)
	rgbblueto_b=parseInt("0x"+hexablue)
	
	changefromto()
}

function changefromto() {
	rgbrednow=rgbrednow-((rgbredfrom-rgbredto)/i_stepmax)
	rgbgreennow=rgbgreennow-((rgbgreenfrom-rgbgreento)/i_stepmax)
	rgbbluenow=rgbbluenow-((rgbbluefrom-rgbblueto)/i_stepmax)
	
	rgbrednow_b=rgbrednow_b-((rgbredfrom_b-rgbredto_b)/i_stepmax)
	rgbgreennow_b=rgbgreennow_b-((rgbgreenfrom_b-rgbgreento_b)/i_stepmax)
	rgbbluenow_b=rgbbluenow_b-((rgbbluefrom_b-rgbblueto_b)/i_stepmax)
	
	if (rgbrednow>255) {rgbrednow=255}
	if (rgbrednow<0) {rgbrednow=0}
	if (rgbgreennow>255) {rgbgreennow=255}
	if (rgbgreennow<0) {rgbgreennow=0}
	if (rgbbluenow>255) {rgbbluenow=255}
	if (rgbbluenow<0) {rgbbluenow=0}
	
	if (rgbrednow_b>255) {rgbrednow_b=255}
	if (rgbrednow_b<0) {rgbrednow_b=0}
	if (rgbgreennow_b>255) {rgbgreennow_b=255}
	if (rgbgreennow_b<0) {rgbgreennow_b=0}
	if (rgbbluenow_b>255) {rgbbluenow_b=255}
	if (rgbbluenow_b<0) {rgbbluenow_b=0}
	
	if (i_step<=i_stepmax) {
      	redcol_1 = hexc[Math.floor(rgbrednow/16)];
     	redcol_2 = hexc[Math.floor(rgbrednow)%16];
	 	greencol_1 = hexc[Math.floor(rgbgreennow/16)];
      	greencol_2 = hexc[Math.floor(rgbgreennow)%16];
	  	bluecol_1 = hexc[Math.floor(rgbbluenow/16)];
      	bluecol_2 = hexc[Math.floor(rgbbluenow)%16];
		
		redcol_1_b = hexc[Math.floor(rgbrednow_b/16)];
     	redcol_2_b = hexc[Math.floor(rgbrednow_b)%16];
	 	greencol_1_b = hexc[Math.floor(rgbgreennow_b/16)];
      	greencol_2_b = hexc[Math.floor(rgbgreennow_b)%16];
	  	bluecol_1_b = hexc[Math.floor(rgbbluenow_b/16)];
      	bluecol_2_b = hexc[Math.floor(rgbbluenow_b)%16];
	  	var backcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2
		var backcolor_b="#"+redcol_1_b+redcol_2_b+greencol_1_b+greencol_2_b+bluecol_1_b+bluecol_2_b
	  	document.body.style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+backcolor+", endColorstr="+backcolor_b+")"
		var timer=setTimeout("changefromto()",30);
		i_step++
    } 
  	else {
  		clearTimeout(timer)
		i_step=1
		i_loop++
		if (i_loop<i_loopmax) {var timer=setTimeout("changetofrom()",pausebetweencolors);}
  	}
}

function changetofrom() {
	rgbrednow=rgbrednow-((rgbredto-rgbredfrom)/i_stepmax)
	rgbgreennow=rgbgreennow-((rgbgreento-rgbgreenfrom)/i_stepmax)
	rgbbluenow=rgbbluenow-((rgbblueto-rgbbluefrom)/i_stepmax)
	
	rgbrednow_b=rgbrednow_b-((rgbredto_b-rgbredfrom_b)/i_stepmax)
	rgbgreennow_b=rgbgreennow_b-((rgbgreento_b-rgbgreenfrom_b)/i_stepmax)
	rgbbluenow_b=rgbbluenow_b-((rgbblueto_b-rgbbluefrom_b)/i_stepmax)
	
	if (rgbrednow>255) {rgbrednow=255}
	if (rgbrednow<0) {rgbrednow=0}
	if (rgbgreennow>255) {rgbgreennow=255}
	if (rgbgreennow<0) {rgbgreennow=0}
	if (rgbbluenow>255) {rgbbluenow=255}
	if (rgbbluenow<0) {rgbbluenow=0}
	
	if (rgbrednow_b>255) {rgbrednow_b=255}
	if (rgbrednow_b<0) {rgbrednow_b=0}
	if (rgbgreennow_b>255) {rgbgreennow_b=255}
	if (rgbgreennow_b<0) {rgbgreennow_b=0}
	if (rgbbluenow_b>255) {rgbbluenow_b=255}
	if (rgbbluenow_b<0) {rgbbluenow_b=0}
	
	if (i_step<=i_stepmax) {
      	redcol_1 = hexc[Math.floor(rgbrednow/16)];
     	redcol_2 = hexc[Math.floor(rgbrednow)%16];
	 	greencol_1 = hexc[Math.floor(rgbgreennow/16)];
      	greencol_2 = hexc[Math.floor(rgbgreennow)%16];
	  	bluecol_1 = hexc[Math.floor(rgbbluenow/16)];
      	bluecol_2 = hexc[Math.floor(rgbbluenow)%16];
		
		redcol_1_b = hexc[Math.floor(rgbrednow_b/16)];
     	redcol_2_b = hexc[Math.floor(rgbrednow_b)%16];
	 	greencol_1_b = hexc[Math.floor(rgbgreennow_b/16)];
      	greencol_2_b = hexc[Math.floor(rgbgreennow_b)%16];
	  	bluecol_1_b = hexc[Math.floor(rgbbluenow_b/16)];
      	bluecol_2_b = hexc[Math.floor(rgbbluenow_b)%16];
	  	var backcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2
		var backcolor_b="#"+redcol_1_b+redcol_2_b+greencol_1_b+greencol_2_b+bluecol_1_b+bluecol_2_b
		document.body.style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+backcolor+", endColorstr="+backcolor_b+")"
		var timer=setTimeout("changetofrom()",30);
		i_step++
    } 
  	else {
  		clearTimeout(timer)
		i_step=1
		i_loop++
		if (i_loop<i_loopmax) {var timer=setTimeout("changefromto()",pausebetweencolors);}
  	}
}
if (document.all) {
	window.onload=translateintorgb
}
</script>