Free Javascript: Gradient Background Multicolor

Monday, May 7, 2007

Gradient Background Multicolor

Similar to Gradient Background but with Multicolor Fader. Paste this code between "<HEAD>" and "</HEAD>"

<script> // CREDITS: // Gradient Background Fader, Multicolor // 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 // 11/27/2003  // IMPORTANT: // If you add this script to a script-library or script-archive // you have to add a highly visible link to // http://www.24fun.com on the webpage // where this script will be featured  /////////////////////////////////////////////////////////////////////////// // CONFIGURATION STARTS HERE ///////////////////////////////////////////////////////////////////////////  // Select the colors (hexadecimal triplet value required) // Please note that at least 3 colors are required! var colors=new Array("#FFFF00","#00FFFF","#5fc700","#854b00","#76e07c","#FFAC00","#FFFF66","#ff0000","#FFFFFF","#850044","#B56AFF","#56B1FF")  // Set pause between colors (seconds) var pausebetweencolors=2  // What type of gradient should be applied Internet Explorer 5x or higher? // Set "none" or "horizontal" or "vertical" var gradient_effect="horizontal"  // Set speed (higher=slower) var speed=20  // How many times shall the effect be repeated? // Add a value between 1 and 9999999 var i_loopmax=1000  /////////////////////////////////////////////////////////////////////////// // CONFIGURATION ENDS HERE ///////////////////////////////////////////////////////////////////////////  // do not edit code below this line var pausesteps=40 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 colorhexafrom var colorhexato  var i_step=1 var i_loop=0 var i_colorsA=0 var i_colorsB=1 var i_colorsC=1 var i_colorsD=2  pausebetweencolors*=1000  var browserinfos=navigator.userAgent  var ie4=document.all&&!document.getElementById var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) var ns4=document.layers var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/)   var browserok=ie4||ie5||ns4||ns6||opera  function translateintorgb() {  	var hexa=colors[i_colorsA] 	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=colors[i_colorsB] 	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=colors[i_colorsC] 	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=colors[i_colorsD] 	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) 	i_colorsA++ 	i_colorsB++ 	i_colorsC++ 	i_colorsD++ 	if (i_colorsA>=colors.length) {i_colorsA=0} 	if (i_colorsB>=colors.length) {i_colorsB=0} 	if (i_colorsC>=colors.length) {i_colorsC=0} 	if (i_colorsD>=colors.length) {i_colorsD=0} 	 	changefromto() }  function changefromto() { 	rgbrednow=rgbrednow-((rgbredfrom-rgbredto)/speed) 	rgbgreennow=rgbgreennow-((rgbgreenfrom-rgbgreento)/speed) 	rgbbluenow=rgbbluenow-((rgbbluefrom-rgbblueto)/speed) 	 	rgbrednow_b=rgbrednow_b-((rgbredfrom_b-rgbredto_b)/speed) 	rgbgreennow_b=rgbgreennow_b-((rgbgreenfrom_b-rgbgreento_b)/speed) 	rgbbluenow_b=rgbbluenow_b-((rgbbluefrom_b-rgbblueto_b)/speed) 	 	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<=speed) {       	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 		if (ie5 && gradient_effect!="none") { 			if (gradient_effect=="horizontal") {var gr_effect=1} 			if (gradient_effect=="vertical") {var gr_effect=0} 	  		document.body.style.filter= "progid:DXImageTransform.Microsoft.Gradient(startColorstr="+backcolor+", endColorstr="+backcolor_b+", GradientType="+gr_effect+")" 		} 		else { 	  		document.bgColor=backcolor  		}  		i_step++ 		var timer=setTimeout("changefromto()",pausesteps); 	     }    	else {   		clearTimeout(timer) 		i_step=1 		i_loop++ 		if (i_loop<i_loopmax) {var timer=setTimeout("translateintorgb()",pausebetweencolors);}   	} }   if (browserok) { 	window.onload=translateintorgb } </script>

Tags: Gradient Background Multicolor Fader, Free Javascript

No comments:

Subscribe to: Post Comments (Atom)

INSTRUCTION