Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Color Animation for DIV, works but need smooth changes

    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:

    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/develop...spancycle.html

    Any help is appreciated.
    Last edited by alby13; 05-29-2009 at 10:59 AM. Reason: Resolved. Thank you!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    alby13 (05-29-2009)

  • #3
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    There's absolutely no reson that the code used to power the example you linked couldn't be bent to your will:

    Code:
    //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
    Code:
    faderObj[i].style.backgroundColor = getColor(start, end, index);
    Border Colour
    Code:
    faderObj[i].style.borderColor = getColor(start, end, index);
    you get the picture, right?

    Mike out.
    Last edited by Mikebert4; 05-29-2009 at 10:22 AM.

  • Users who have thanked Mikebert4 for this post:

    alby13 (05-29-2009)

  • #4
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    <!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.

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Mikebert4 View Post
    There's absolutely no reson that the code used to power the example you linked couldn't be bent to your will:

    Code:
    //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
    Code:
    faderObj[i].style.backgroundColor = getColor(start, end, index);
    Border Colour
    Code:
    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.

  • #6
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Mikebert4 View Post
    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
    Code:
    faderObj[i].style.backgroundColor = getColor(start, end, index);
    Border Colour
    Code:
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •