JavaScript visual effect: Animated Bars, selectable colors

» 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

Animated Bars, selectable colors
Create animated bars fadeing through a set of selectable colors. Add as many horizontal or vertical bars as you like. Easy configuration of colors, width, length, speed and type of gradient-effect. Two different gradient-effects for IE5x/6x/7x/8x/9x. Standard effect for FF2x/3x, Opera 7x/8x/9x/10x/11x, Chrome 3x/4x%7x/6x/7x/8x.

Animated Bars, random colors
Click here if you prefer to apply random colors.

Configuration:

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

<script>
// CREDITS:
// Animated Bars, selectable colors
// By Peter Gehrig
// Copyright (c) 2010 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.fabulant.com

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

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

// Select the colors as hexadecimal triplet values
// Please note that at least 3 colors are required
var colors=new Array("#FFFFFF","#FFFF00","#FF0000","#0000FF","#00FF00","#FF00FF","#FFAC00","#0000FF","#ff0000","#690b00","#00FF00","#FFFF00","#000000")

// Set pause between colors (seconds)
var pausebetweencolors=2

// Set speed (higher=slower)
var speed=20

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

// do not edit code below this line
var gradient_effect=new Array()
var flipcol=new Array()
var gr_effect=1
var i_barcount=0
var pausesteps=40
var i_loopmax=999999
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 ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)  
var browserok=ie5||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 addbar(barwidth,barheight,gradienttype,flipcolor) {
	if (browserok) {
		gradient_effect[i_barcount]=gradienttype
		flipcol[i_barcount]=flipcolor

document.write('<table border=0 cellpadding=0 cellspacing=0 width='+barwidth+' height='+barheight+' border=0><tr><td><div id="roof'+i_barcount+'" style="position:relative;width:'+barwidth+'px;height:'+barheight+'px;"><div id="anibar'+i_barcount+'" style="position:absolute;top:0px;left:0px;width:'+barwidth+'px;height:'+barheight+'px;"><img src="empty.gif" width='+barwidth+' height='+barheight+'></div></div></td></tr></table>')
		i_barcount++
	}
}

if (browserok) {
	window.onload=translateintorgb
}
</script>

Step 2: Open your webpage. Go to the top of the script-code and configure the fade-effect and speed.

Step 3: Open your webpage. Paste the code inside the yellow box where you wish to add an animated bar (add as many as you like).Then set the 4 attributes inside the brackets according to the colorized explanations:

<script>addbar(500,3,"horizontal","yes")</script>

red attribute: the width of the bar (pixels).
blue attribute: the height of the bar (pixels).
green attribute: the type of gradient effect for IE 5x/6x. Acceptable values are "horizontal" or "vertical" or "none".
brown attribute: color switcher. Acceptable values are "yes" or "no".

Step 4:

Save the small rectangle on the left as "empty.gif".
Put it into the same folder as the webpage
that contains your animated bar(s).