Full version: jsB@nk » Background » Gradient Background Fader with multicolors
URL: https://www.javascriptbank.com/gradient-background-fader-with-multicolor.html
This JavaScript creates a smooth and stunning gradient background animation between selectable colors or random colors.
Full version: jsB@nk » Background » Gradient Background Fader with multicolors
URL: https://www.javascriptbank.com/gradient-background-fader-with-multicolor.html
<script>// Gradient Background Fader, Multicolor///////////////////////////////////////////////////////////////////////////// CONFIGURATION STARTS HERE///////////////////////////////////////////////////////////////////////////// Author: Peter Gehrig // Web Site: http://www.24fun.com // 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 9999999var i_loopmax=1000///////////////////////////////////////////////////////////////////////////// CONFIGURATION ENDS HERE///////////////////////////////////////////////////////////////////////////// do not edit code below this linevar pausesteps=40var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')var redcol_1var redcol_2 var redcol_1_bvar redcol_2_b var greencol_1 var greencol_2 var greencol_1_b var greencol_2_bvar bluecol_1 var bluecol_2 var bluecol_1_b var bluecol_2_b var rgbredfromvar rgbgreenfromvar rgbbluefromvar rgbredtovar rgbgreentovar rgbbluetovar rgbrednowvar rgbgreennowvar rgbbluenowvar rgbredfrom_bvar rgbgreenfrom_bvar rgbbluefrom_bvar rgbredto_bvar rgbgreento_bvar rgbblueto_bvar rgbrednow_bvar rgbgreennow_bvar rgbbluenow_bvar colorhexafromvar colorhexatovar i_step=1var i_loop=0var i_colorsA=0var i_colorsB=1var i_colorsC=1var i_colorsD=2pausebetweencolors*=1000var browserinfos=navigator.userAgent var ie4=document.all&&!document.getElementByIdvar ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)var ns4=document.layersvar ns6=document.getElementById&&!document.allvar opera=browserinfos.match(/Opera/) var browserok=ie4||ie5||ns4||ns6||operafunction 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=rgbredfromrgbgreennow=rgbgreenfromrgbbluenow=rgbbluefromvar 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_brgbgreennow_b=rgbgreenfrom_brgbbluenow_b=rgbbluefrom_bvar 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_2var backcolor_b="#"+redcol_1_b+redcol_2_b+greencol_1_b+greencol_2_b+bluecol_1_b+bluecol_2_bif (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=1i_loop++if (i_loop<i_loopmax) {var timer=setTimeout("translateintorgb()",pausebetweencolors);} }}if (browserok) {window.onload=translateintorgb}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->