« »

Create animated bars fadeing through a set of random or 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. Standard effect for NS6x/7x and Opera7x.

Label: Bar Animator

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Generate your business videos by AI with voice or just text

Your first FREE AI Video App! Automate Your First AI Video. Create Your Professional Video In 5 Minutes By AI No Equipment Or Video Editing Skill Requred. Effortless Video Production For Content Marketers. Free UNLMITED AI Video App in Your Hand

Code
JavaScript
HTML
Print

Copy All x2

<script language="javascript">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

// Bar Animator, random colors
///////////////////////////////////////////////////////////////////////////
// CONFIGURATION STARTS HERE
///////////////////////////////////////////////////////////////////////////

// Select fade-effect below:
// Set 1 if the background may fade from dark to medium 
// Set 2 if the background may fade from light to medium 
// Set 3 if the background may fade from very dark to very light light
// Set 4 if the background may fade from light to very light
// Set 5 if the background may fade from dark to very dark 
var fade_effect=3

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

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////
var gradient_effect=new Array()
var flipcol=new Array()
var gr_effect=1
var i_barcount=0
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

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=190
	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 newred
var newgreen
var newblue
var oldred
var oldgreen
var oldblue

var redcol_1
var redcol_2 
var greencol_1 
var greencol_2 
var bluecol_1 
var bluecol_2 
var oldcolor
var newcolor
var newcolorCompl
var firsttime=true
 
var stepred=1
var stepgreen=1
var stepblue=1

function setrandomcolor() {
	var range=(lightmax-darkmax)
	if (firsttime) {
		newred=Math.ceil(range*Math.random())+darkmax
		newgreen=Math.ceil(range*Math.random())+darkmax
		newblue=Math.ceil(range*Math.random())+darkmax
		firsttime=false
	}
	
	oldred=Math.ceil(range*Math.random())+darkmax
	oldgreen=Math.ceil(range*Math.random())+darkmax
	oldblue=Math.ceil(range*Math.random())+darkmax
	
	stepred=newred-oldred
	if (oldred>newred) {stepred=1}
	else if (oldred<newred) {stepred=-1}
	else {stepred=0}
	
	stepgreen=newgreen-oldgreen
	if (oldgreen>newgreen) {stepgreen=1}
	else if (oldgreen<newgreen) {stepgreen=-1}
	else {stepgreen=0}
	
	stepblue=newblue-oldblue
	if (oldblue>newblue) {stepblue=1}
	else if (oldblue<newblue) {stepblue=-1}
	else {stepblue=0}
	fadebg()
}

function fadebg() {
	if (newred==oldred) {stepred=0}
	if (newgreen==oldgreen) {stepgreen=0}
	if (newblue==oldblue) {stepblue=0}
	newred+=stepred
	newgreen+=stepgreen
	newblue+=stepblue
	
	if (stepred!=0 || stepgreen!=0 || stepblue!=0) {
      	redcol_1 = hexc[Math.floor(newred/16)];
     	redcol_2 = hexc[newred%16];
	 	greencol_1 = hexc[Math.floor(newgreen/16)];
      	greencol_2 = hexc[newgreen%16];
	  	bluecol_1 = hexc[Math.floor(newblue/16)];
      	bluecol_2 = hexc[newblue%16];
	  	newcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2

      	greencol_1 = hexc[Math.floor(newred/16)];
     	greencol_2 = hexc[newred%16];
	 	bluecol_1 = hexc[Math.floor(newgreen/16)];
      	bluecol_2 = hexc[newgreen%16];
	  	redcol_1 = hexc[Math.floor(newblue/16)];
      	redcol_2 = hexc[newblue%16];
		newcolorCompl="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2

		for (i=0;i<=i_barcount-1;i++) {
			if (ie5 && gradient_effect[i]!="none") {
			if (gradient_effect[i]=="horizontal") {gr_effect=1}
			if (gradient_effect[i]=="vertical") {gr_effect=0}
				if (flipcol[i]=="yes") {
					document.getElementById('anibar'+i).style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+newcolorCompl+", endColorstr="+newcolor+" GradientType="+gr_effect+")"
				}
				else {
					document.getElementById('anibar'+i).style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+newcolor+", endColorstr="+newcolorCompl+" GradientType="+gr_effect+")"
				}
			}
			else {
				if (flipcol[i]=="yes") {
	  				document.getElementById('anibar'+i).style.backgroundColor=newcolor 
				}
				else {
					document.getElementById('anibar'+i).style.backgroundColor=newcolorCompl 
				}
			}
		}
		var timer=setTimeout("fadebg()",speed);
    } 
  	else {
  		clearTimeout(timer)
		newred=oldred
		newgreen=oldgreen
		newblue=oldblue
		setrandomcolor()
  	}
}

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=setrandomcolor
}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script>addbar(500,10,"vertical","yes")</script><br>
<script>addbar(500,10,"horizontal","yes")</script><br>
<script>addbar(500,10,"horizontal","yes")</script><br>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
Peter Gehrig [more]
2,973
0
0
0
7.57 KBytes

JavaScript Bar Animator

0/5 0 votes / 2,973 previews / 0 comment 30/01/2007 Create animated bars fadeing through a set of random or selectable colors. Add as many horizontal or vertical bars as yo...JavaScript Bar Animator - Bar Animator

Let's be first member to do this

ttv1

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web

Bar Animator

Label: Bar Animator (adsbygoogle = window.adsbygoogle || []).push({});

Generate your business videos by AI with voice or just text

Write your comment

Label: Bar Animator