...

View Full Version : Resolved Color Animation for DIV, works but need smooth changes



alby13
05-29-2009, 09:48 AM
I've been trying to figure this out but it's killing me. I currently have a CSS page set up and I have a specific DIV that I would like to have a smooth color transition (like a rainbow effect).

I was able to find this code:



<!-- This div is the element we are animating -->
<div id="urgent"><h1>Red Alert!</h1>The Web server is under attack!</div>
<!-- This is the animation script for the element -->
<script>
var e = document.getElementById("urgent"); // Get the element object
var colors = ["white", "yellow", "orange", "red"] // Colors to cycle through
var nextColor = 0; // Position in the cycle
// Evaluate the following expression every 500 milliseconds.
// This animates the background color of the DIV element.
setInterval("e.style.backgroundColor=colors[nextColor++%colors.length];", 500);
</script>


But the problem is that the color change doesn't fade/tween

I would like it to be like the text in this example: http://www.javascript-fx.com/development/colorcycle/spancycle.html

Any help is appreciated.

vwphillips
05-29-2009, 10:15 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Element Animator (21-October-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the
// left, top, width, height, color, background-Color, Opacity, border-Width, border-Color, clip
// style of an element over a specified period of time.



// **** Functional Code - NO NEED to Change


function zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime,zxccurve){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)||zxcsrt==zxcfin) return;
var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
var zxcunits=zxcsrt.toString().replace(/\d|-/g,'')||'px';
zxcsrt=zxcNuClipRGB(zxcsrt,zxcmde); zxcfin=zxcNuClipRGB(zxcfin,zxcmde);
if (zxcoop){
if (zxcmde.match('#')&&zxcsrt.compare(zxcoop.srtfin[0])&&zxcfin.compare(zxcoop.srtfin[1])) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0].compare(zxcoop.data[2]))?zxcfin:zxcsrt],zxccurve,zxctime,zxcunits);
else zxcoop.update([zxcsrt,zxcfin],zxccurve,zxctime);
}
else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcAnimatorOOP(zxcmde.replace(/[-#]/g,''),zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcunits);
}

function zxcAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcunits){
if (zxcStyleValue(zxcobj,'position')=='static'&&(zxcmde=='left'||zxcmde=='top')) zxcobj.style.position='relative';
this.srtfin=[[],[]];
for (var zxc0=0;zxc0<zxcsrt.length;zxc0++){ this.srtfin[0].push(zxcsrt[zxc0]); this.srtfin[1].push(zxcfin[zxc0]); }
this.to=null;
this.obj=zxcobj;
this.mde=zxcmde;
this.std=!(zxcmde.indexOf('olor')>0||zxcmde=='clip'||zxcmde=='opacity');
this.update([zxcsrt,zxcfin],zxccurve,zxctime,zxcunits);
}

zxcAnimatorOOP.prototype.update=function(zxcsrtfin,zxccurve,zxctime,zxcunits){
clearTimeout(this.to);
zxccurve=zxccurve||this.curve||'';
this.time=zxctime||this.time||2000;
this.units=zxcunits||this.units;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
for (var zxc0=0;zxc0<zxcsrtfin.length;zxc0++){
var zxcobj=document.getElementById(zxcsrtfin[zxc0]);
if (zxcobj){ zxcsrtfin[zxc0]=zxcStyleValue(zxcobj,zxcmde); if (!this.mde.match('olor')) zxcsrtfin[zxc0]=parseInt(zxcsrtfin[zxc0]); }
if (zxcsrtfin[zxc0]==[0]) zxcsrtfin[zxc0]=[0.00001];
}
if (this.mde=='opacity'&&(zxcsrtfin[0]<0||zxcsrtfin[0]>100||zxcsrtfin[0]<0||zxcsrtfin[0]>100)) return;
this.curve=zxccurve.charAt(0).toLowerCase();
var zxcmatch=zxcsrtfin[0].toString();
this.data=[[],zxcsrtfin[0],zxcsrtfin[1]];
for (var zxc0 in this.data[1]) this.data[0][zxc0]=(this.data[1][zxc0]);
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.time);
this.cng();
}

zxcAnimatorOOP.prototype.cng=function(){
var zxcms=new Date().getTime()-this.srttime;
for (var zxc0 in this.data[2]){
this.data[0][zxc0]=(this.curve=='s')?Math.floor((this.data[2][zxc0]-this.data[1][zxc0])*Math.sin(this.inc*zxcms)+this.data[1][zxc0]):(this.curve=='c')?(this.data[2][0])-Math.floor((this.data[2][zxc0]-this.data[1][zxc0])*Math.cos(this.inc*zxcms)):(this.data[2][zxc0]-this.data[1][zxc0])/this.time*zxcms+this.data[1][zxc0];
if (this.mde!='left'&&this.mde!='top'&&this.data[0][zxc0]<0) this.data[0][zxc0]=0;
}
this.cngstyle(this.data[0]);
if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
else { this.data[0]=this.data[2]; this.cngstyle(this.data[0]); }
}

zxcAnimatorOOP.prototype.cngstyle=function(zxcv){
for (var zxc0=0;zxc0<zxcv.length;zxc0++) zxcv[zxc0]=Math.floor(zxcv[zxc0]);
if (this.std) this.obj.style[this.mde]=zxcv[0]+this.units;
else if (this.mde.indexOf('olor')>0) this.obj.style[this.mde]='rgb('+zxcv[0]+','+zxcv[1]+','+zxcv[2]+')';
else if (this.mde=='clip') this.obj.style[this.mde]='rect('+zxcv[0]+' '+zxcv[1]+' '+zxcv[2]+' '+zxcv[3]+')';
else if (this.mde=='opacity')this.opacity(zxcv[0]);
}

zxcAnimatorOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100){ return; }
this.obj.style.filter='alpha(opacity='+zxcopc+')';
this.obj.style.opacity=this.obj.style.MozOpacity=this.obj.style.KhtmlOpacity=zxcopc/100-.001;
}

function zxcStyleValue(zxcel,zxcp){
if (zxcel.currentStyle) return zxcel.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcNuClipRGB(zxccol,zxcmde){
if (typeof(zxccol)=='object') return zxccol;
if (zxcmde=='clip') return zxccol.replace(/[rect()]/g,'').split(' ');
if (!zxccol.toString().match('#')) return [parseInt(zxccol)];
zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol .substring(5,7),16);
zxccol=zxccol.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
}

Array.prototype.compare=function(zxcary){
for (var zxc0=0;zxc0<this.length;zxc0++){ if (this[zxc0]!=zxcary[zxc0]) return false; }
return true;
}

/*]]>*/
</script>
</head>

<body>
<div id="tst" style="width:100px;height:100px;"></div>
<input type="button" name="" value="Change" onclick="zxcAnimator('background-Color','tst','#CCFFFF','#003399',1000);"/>

</body>

</html>

Mikebert4
05-29-2009, 10:15 AM
There's absolutely no reson that the code used to power the example you linked couldn't be bent to your will:




//Set the colors you want in this array
var colors = new Array("339966", "FF0000", "00FF00", "0000FF", "FFFF00", "FF00FF", "00FFFF");

//to start the effects, just call this function (onload, onclick.. etc)
function StartEffects()
{
fadeAll("id1","id2");
}

//==========================//

var start = colors[0];
var end = colors[0];
var index = 0;
var cindex = 0;
var faderObj = new Array();

function getColor(start, end, percent){
function hex2dec(hex){return(parseInt(hex,16));}
function dec2hex(dec){return (dec < 16 ? "0" : "") + dec.toString(16);}
var r1 = hex2dec(start.slice(0,2)), g1=hex2dec(start.slice(2,4)), b1=hex2dec(start.slice(4,6));
var r2 = hex2dec(end.slice(0,2)), g2=hex2dec(end.slice(2,4)), b2=hex2dec(end.slice(4,6));
var pc = percent/100;
var r = Math.floor(r1+(pc*(r2-r1)) + .5), g=Math.floor(g1+(pc*(g2-g1)) + .5), b=Math.floor(b1+(pc*(b2-b1)) + .5);
return("#" + dec2hex(r) + dec2hex(g) + dec2hex(b));
}

function fadeSpan()
{
if(index == 0)
{
start = end;
end = colors[ cindex = (cindex+1) % colors.length ];
}

for(var i=0 ; i<faderObj.length ; i++)
faderObj[i].style.color = getColor(start, end, index);

index = (index+5) % 100;

setTimeout("fadeSpan()", 40);
}
function fadeAll()
{
for(var i=0 ; i<arguments.length ; i++)
faderObj[i] = document.getElementById(arguments[i]);

fadeSpan();
}


if you want to change some other color property (backgroundColor, borderColor, you name it) then just change the following line:

Background


faderObj[i].style.backgroundColor = getColor(start, end, index);


Border Colour


faderObj[i].style.borderColor = getColor(start, end, index);


you get the picture, right?

Mike out.

alby13
05-29-2009, 10:47 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Element Animator (21-October-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the
// left, top, width, height, color, background-Color, Opacity, border-Width, border-Color, clip
// style of an element over a specified period of time.



// **** Functional Code - NO NEED to Change


function zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime,zxccurve){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)||zxcsrt==zxcfin) return;
var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
var zxcunits=zxcsrt.toString().replace(/\d|-/g,'')||'px';
zxcsrt=zxcNuClipRGB(zxcsrt,zxcmde); zxcfin=zxcNuClipRGB(zxcfin,zxcmde);
if (zxcoop){
if (zxcmde.match('#')&&zxcsrt.compare(zxcoop.srtfin[0])&&zxcfin.compare(zxcoop.srtfin[1])) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0].compare(zxcoop.data[2]))?zxcfin:zxcsrt],zxccurve,zxctime,zxcunits);
else zxcoop.update([zxcsrt,zxcfin],zxccurve,zxctime);
}
else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcAnimatorOOP(zxcmde.replace(/[-#]/g,''),zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcunits);
}

function zxcAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcunits){
if (zxcStyleValue(zxcobj,'position')=='static'&&(zxcmde=='left'||zxcmde=='top')) zxcobj.style.position='relative';
this.srtfin=[[],[]];
for (var zxc0=0;zxc0<zxcsrt.length;zxc0++){ this.srtfin[0].push(zxcsrt[zxc0]); this.srtfin[1].push(zxcfin[zxc0]); }
this.to=null;
this.obj=zxcobj;
this.mde=zxcmde;
this.std=!(zxcmde.indexOf('olor')>0||zxcmde=='clip'||zxcmde=='opacity');
this.update([zxcsrt,zxcfin],zxccurve,zxctime,zxcunits);
}

zxcAnimatorOOP.prototype.update=function(zxcsrtfin,zxccurve,zxctime,zxcunits){
clearTimeout(this.to);
zxccurve=zxccurve||this.curve||'';
this.time=zxctime||this.time||2000;
this.units=zxcunits||this.units;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
for (var zxc0=0;zxc0<zxcsrtfin.length;zxc0++){
var zxcobj=document.getElementById(zxcsrtfin[zxc0]);
if (zxcobj){ zxcsrtfin[zxc0]=zxcStyleValue(zxcobj,zxcmde); if (!this.mde.match('olor')) zxcsrtfin[zxc0]=parseInt(zxcsrtfin[zxc0]); }
if (zxcsrtfin[zxc0]==[0]) zxcsrtfin[zxc0]=[0.00001];
}
if (this.mde=='opacity'&&(zxcsrtfin[0]<0||zxcsrtfin[0]>100||zxcsrtfin[0]<0||zxcsrtfin[0]>100)) return;
this.curve=zxccurve.charAt(0).toLowerCase();
var zxcmatch=zxcsrtfin[0].toString();
this.data=[[],zxcsrtfin[0],zxcsrtfin[1]];
for (var zxc0 in this.data[1]) this.data[0][zxc0]=(this.data[1][zxc0]);
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.time);
this.cng();
}

zxcAnimatorOOP.prototype.cng=function(){
var zxcms=new Date().getTime()-this.srttime;
for (var zxc0 in this.data[2]){
this.data[0][zxc0]=(this.curve=='s')?Math.floor((this.data[2][zxc0]-this.data[1][zxc0])*Math.sin(this.inc*zxcms)+this.data[1][zxc0]):(this.curve=='c')?(this.data[2][0])-Math.floor((this.data[2][zxc0]-this.data[1][zxc0])*Math.cos(this.inc*zxcms)):(this.data[2][zxc0]-this.data[1][zxc0])/this.time*zxcms+this.data[1][zxc0];
if (this.mde!='left'&&this.mde!='top'&&this.data[0][zxc0]<0) this.data[0][zxc0]=0;
}
this.cngstyle(this.data[0]);
if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
else { this.data[0]=this.data[2]; this.cngstyle(this.data[0]); }
}

zxcAnimatorOOP.prototype.cngstyle=function(zxcv){
for (var zxc0=0;zxc0<zxcv.length;zxc0++) zxcv[zxc0]=Math.floor(zxcv[zxc0]);
if (this.std) this.obj.style[this.mde]=zxcv[0]+this.units;
else if (this.mde.indexOf('olor')>0) this.obj.style[this.mde]='rgb('+zxcv[0]+','+zxcv[1]+','+zxcv[2]+')';
else if (this.mde=='clip') this.obj.style[this.mde]='rect('+zxcv[0]+' '+zxcv[1]+' '+zxcv[2]+' '+zxcv[3]+')';
else if (this.mde=='opacity')this.opacity(zxcv[0]);
}

zxcAnimatorOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100){ return; }
this.obj.style.filter='alpha(opacity='+zxcopc+')';
this.obj.style.opacity=this.obj.style.MozOpacity=this.obj.style.KhtmlOpacity=zxcopc/100-.001;
}

function zxcStyleValue(zxcel,zxcp){
if (zxcel.currentStyle) return zxcel.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcNuClipRGB(zxccol,zxcmde){
if (typeof(zxccol)=='object') return zxccol;
if (zxcmde=='clip') return zxccol.replace(/[rect()]/g,'').split(' ');
if (!zxccol.toString().match('#')) return [parseInt(zxccol)];
zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol .substring(5,7),16);
zxccol=zxccol.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
}

Array.prototype.compare=function(zxcary){
for (var zxc0=0;zxc0<this.length;zxc0++){ if (this[zxc0]!=zxcary[zxc0]) return false; }
return true;
}

/*]]>*/
</script>
</head>

<body>
<div id="tst" style="width:100px;height:100px;"></div>
<input type="button" name="" value="Change" onclick="zxcAnimator('background-Color','tst','#CCFFFF','#003399',1000);"/>

</body>

</html>

Okay I got some kind of progress using this code. I want it to automatically cycle through the colors over and over again when the page is brought up. I added an onload to the body but it just fades one time and then it stops. How would I make it repeat? Also can I fade between more than 2 colors? Thanks for your response in any case.

alby13
05-29-2009, 10:49 AM
There's absolutely no reson that the code used to power the example you linked couldn't be bent to your will:




//Set the colors you want in this array
var colors = new Array("339966", "FF0000", "00FF00", "0000FF", "FFFF00", "FF00FF", "00FFFF");

//to start the effects, just call this function (onload, onclick.. etc)
function StartEffects()
{
fadeAll("id1","id2");
}

//==========================//

var start = colors[0];
var end = colors[0];
var index = 0;
var cindex = 0;
var faderObj = new Array();

function getColor(start, end, percent){
function hex2dec(hex){return(parseInt(hex,16));}
function dec2hex(dec){return (dec < 16 ? "0" : "") + dec.toString(16);}
var r1 = hex2dec(start.slice(0,2)), g1=hex2dec(start.slice(2,4)), b1=hex2dec(start.slice(4,6));
var r2 = hex2dec(end.slice(0,2)), g2=hex2dec(end.slice(2,4)), b2=hex2dec(end.slice(4,6));
var pc = percent/100;
var r = Math.floor(r1+(pc*(r2-r1)) + .5), g=Math.floor(g1+(pc*(g2-g1)) + .5), b=Math.floor(b1+(pc*(b2-b1)) + .5);
return("#" + dec2hex(r) + dec2hex(g) + dec2hex(b));
}

function fadeSpan()
{
if(index == 0)
{
start = end;
end = colors[ cindex = (cindex+1) % colors.length ];
}

for(var i=0 ; i<faderObj.length ; i++)
faderObj[i].style.color = getColor(start, end, index);

index = (index+5) % 100;

setTimeout("fadeSpan()", 40);
}
function fadeAll()
{
for(var i=0 ; i<arguments.length ; i++)
faderObj[i] = document.getElementById(arguments[i]);

fadeSpan();
}


if you want to change some other color property (backgroundColor, borderColor, you name it) then just change the following line:

Background


faderObj[i].style.backgroundColor = getColor(start, end, index);


Border Colour


faderObj[i].style.borderColor = getColor(start, end, index);


you get the picture, right?

Mike out.

I've tried to make the code work already but I don't exactly get it. This was pretty much made for span tags and not div tags. I don't get how to modify the code to make it work with a DIV tag like the first snippet of code that I posted.

I did consider reworking that code since it had a good animation with the colors I was looking for.

Thanks for your help. I'm still working on it.

alby13
05-29-2009, 10:57 AM
There's absolutely no reson that the code used to power the example you linked couldn't be bent to your will:
...

if you want to change some other color property (backgroundColor, borderColor, you name it) then just change the following line:

Background


faderObj[i].style.backgroundColor = getColor(start, end, index);


Border Colour


faderObj[i].style.borderColor = getColor(start, end, index);


you get the picture, right?

Mike out.

Okay guys I got it, I got it. Thank you to the both of you. I was able to make this code function with your help, Mike, and I am satisfied reworking this code for my site. Good job :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum