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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Atlanta, GA.
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Color Fading Function

    I used to use this function in text fading routines (tooltips/message tickers) but now I tend to use opacity (which is not compatible with all browsers but I find it more flexible as it allows images, URLs any style sheets).
    The function returns a color "between" 2 colors.
    PHP Code:
    /***********************************************
    *
    * Function    : getColor
    *
    * Parameters  :    start - the start color (in the form "RRGGBB" e.g. "FF00AC")
    *            end - the end color (in the form "RRGGBB" e.g. "FF00AC")
    *            percent - the percent (0-100) of the fade between start & end
    *
    * returns      : color in the form "#RRGGBB" e.g. "#FA13CE"
    *
    * Description : This is a utility function. Given a start and end color and
    *            a percentage fade it returns a color in between the 2 colors
    *
    * Author      : www.JavaScript-FX.com
    *
    *************************************************/
    function getColor(startendpercent)
    {
        var 
    r1=hex2dec(start.slice(0,2));
        var 
    g1=hex2dec(start.slice(2,4));
        var 
    b1=hex2dec(start.slice(4,6));

        var 
    r2=hex2dec(end.slice(0,2));
        var 
    g2=hex2dec(end.slice(2,4));
        var 
    b2=hex2dec(end.slice(4,6));

        var 
    pc percent/100;

        
    rMath.floor(r1+(pc*(r2-r1)) + .5);
        
    gMath.floor(g1+(pc*(g2-g1)) + .5);
        
    bMath.floor(b1+(pc*(b2-b1)) + .5);

        return(
    "#" dec2hex(r) + dec2hex(g) + dec2hex(b));
    }
    /*** These are the simplest HEX/DEC conversion routines I could come up with ***/
    /*** I have seen a lot of fade routines that seem to make this a             ***/
    /*** very complex task. I am sure somene else must've had this idea          ***/
    var hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
    function 
    dec2hex(dec){return(hexDigit[dec>>4]+hexDigit[dec&15]);}
    function 
    hex2dec(hex){return(parseInt(hex,16))}
    /************************************************/ 

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Atlanta, GA.
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Here is a demo - it creates colored bars

    Code:
    <html>
    <title>Fade Function Demo</title>
    <head>
    <script type="text/javascript">
    /***********************************************
    *
    * Function    : getColor
    *
    * Parameters  :	start - the start color (in the form "RRGGBB" e.g. "FF00AC")
    *			end - the end color (in the form "RRGGBB" e.g. "FF00AC")
    *			percent - the percent (0-100) of the fade between start & end
    *
    * returns	  : color in the form "#RRGGBB" e.g. "#FA13CE"
    *
    * Description : This is a utility function. Given a start and end color and
    *		    a percentage fade it returns a color in between the 2 colors
    *
    * Author	  : www.JavaScript-FX.com
    *
    *************************************************/
    function getColor(start, end, percent)
    {
    	var r1=hex2dec(start.slice(0,2));
    	var g1=hex2dec(start.slice(2,4));
    	var b1=hex2dec(start.slice(4,6));
    
    	var r2=hex2dec(end.slice(0,2));
    	var g2=hex2dec(end.slice(2,4));
    	var b2=hex2dec(end.slice(4,6));
    
    	var pc = percent/100;
    
    	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));
    }
    /*** These are the simplest HEX/DEC conversion routines I could come up with ***/
    /*** I have seen a lot of fade routines that seem to make this a             ***/
    /*** very complex task. I am sure somene else must've had this idea          ***/
    var hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
    function dec2hex(dec){return(hexDigit[dec>>4]+hexDigit[dec&15]);}
    function hex2dec(hex){return(parseInt(hex,16))}
    /************************************************/
    </script>
    </head>
    
    <body bgcolor="#000000">
    <script>
    function bar(start, end)
    {
    	for(i=0 ; i<100 ; i++)
    		document.write("<font color='"+ getColor(start, end, i) +"'>|</font>");
    }
    </script>
    
    <script>bar("000000", "FF0000");</script><br>
    <script>bar("000000", "00FF00");</script><br>
    <script>bar("000000", "0000FF");</script><br>
    <script>bar("00FF00", "FF0000");</script><br>
    <script>bar("FF0000", "0000FF");</script><br>
    <script>bar("0000FF", "00FF00");</script><br>
    <script>bar("00FF00", "FF0000");</script><script>bar("FF0000", "0000FF");</script><script>bar("0000FF", "00FF00");</script>
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Atlanta, GA.
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Another demo - constantly fades some text (IE5+ , NS6+)

    Code:
    <html>
    <title>Text Fader Demo</title>
    <head>
    <script type="text/javascript">
    /***********************************************
    *
    * Function    : getColor
    *
    * Parameters  :	start - the start color (in the form "RRGGBB" e.g. "FF00AC")
    *			end - the end color (in the form "RRGGBB" e.g. "FF00AC")
    *			percent - the percent (0-100) of the fade between start & end
    *
    * returns	  : color in the form "#RRGGBB" e.g. "#FA13CE"
    *
    * Description : This is a utility function. Given a start and end color and
    *		    a percentage fade it returns a color in between the 2 colors
    *
    * Author	  : www.JavaScript-FX.com
    *
    *************************************************/
    function getColor(start, end, percent)
    {
    	var r1=hex2dec(start.slice(0,2));
    	var g1=hex2dec(start.slice(2,4));
    	var b1=hex2dec(start.slice(4,6));
    
    	var r2=hex2dec(end.slice(0,2));
    	var g2=hex2dec(end.slice(2,4));
    	var b2=hex2dec(end.slice(4,6));
    
    	var pc = percent/100;
    
    	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));
    }
    /*** These are the simplest HEX/DEC conversion routines I could come up with ***/
    /*** I have seen a lot of fade routines that seem to make this a             ***/
    /*** very complex task. I am sure somene else must've had this idea          ***/
    var hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
    function dec2hex(dec){return(hexDigit[dec>>4]+hexDigit[dec&15]);}
    function hex2dec(hex){return(parseInt(hex,16))}
    /************************************************/
    </script>
    
    <script>
    var colors = new Array("339966", "FF0000", "00FF00", "0000FF", "FFFF00", "FF00FF", "00FFFF");
    var start  = colors[0];
    var end    = colors[0];
    var index  = 0;
    
    function fadeIt()
    {
    	if(index == 0)
    		start = end
    	if(index == 0)
    		end = colors[ Math.floor(Math.random()*colors.length) ];
    
    	document.getElementById("fadingText").style.color = getColor(start, end, index);
    
    	index = (index+2) % 100;
    
    	setTimeout("fadeIt()", 40);
    }
    </script>
    </head>
    
    <body bgcolor="#339966" onLoad="fadeIt()">
    <div id="fadingText" align="center" style="font-family:Arial;font-size:40">HERE IS SOME FADING TEXT</a>
    </body>
    </html>

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cool!

    Just a quick FYI
    Code:
    function dec2hex(dec){return dec.toString(16);}
    in place of
    Code:
    function dec2hex(dec){return(hexDigit[dec>>4]+hexDigit[dec&15]);}
    Cheers

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Atlanta, GA.
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    function dec2hex(dec){return dec.toString(16);}

    A good idea but for numbers 0 to 15 this returns
    "0", "1",...."a", "b", "c", "d" "e", "f"

    but the function needs to return
    "00", "01", ......"0A", "0B", "0C", "0D", "0E", "0F"

    <edit>
    function dec2hex(dec){return (dec < 16 ? "0" : "") + dec.toString(16);}

    This seems to work ok.
    </edit>
    Last edited by RoyW; 08-23-2002 at 02:02 AM.

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, I see.

    function dec2hex(dec){return "0" + dec.toString(16).toUpperCase();}

    Seems to work too

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Atlanta, GA.
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Here's another demo using the modified code.

    Hey thanks beetle.
    Using your suggestion I was able to reduce the size of the function and encapsulate the hex/dec function within the main function.
    Here's another demo that uses the better modified function.

    Code:
    <html>
    <title>Color Fader - Text Demo</title>
    <head>
    <script type="text/javascript">
    /***********************************************
    *
    * Function    : getColor
    *
    * Parameters  :	start - the start color (in the form "RRGGBB" e.g. "FF00AC")
    *			end - the end color (in the form "RRGGBB" e.g. "FF00AC")
    *			percent - the percent (0-100) of the fade between start & end
    *
    * returns	  : color in the form "#RRGGBB" e.g. "#FA13CE"
    *
    * Description : This is a utility function. Given a start and end color and
    *		    a percentage fade it returns a color in between the 2 colors
    *
    * Author	  : Open Source
    *
    *************************************************/
    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));
    	var g1=hex2dec(start.slice(2,4));
    	var b1=hex2dec(start.slice(4,6));
    
    	var r2=hex2dec(end.slice(0,2));
    	var g2=hex2dec(end.slice(2,4));
    	var b2=hex2dec(end.slice(4,6));
    
    	var pc = percent/100;
    
    	var r= Math.floor(r1+(pc*(r2-r1)) + .5);
    	var g= Math.floor(g1+(pc*(g2-g1)) + .5);
    	var b= Math.floor(b1+(pc*(b2-b1)) + .5);
    
    	return("#" + dec2hex(r) + dec2hex(g) + dec2hex(b));
    }
    /************************************************/
    </script>
    
    <script>
    function textBar(theText, s, e)
    {
    	var str = "";
    	for(var x=0 ; x<theText.length ; x++)
    		str += "<font color='" + getColor(s, e, Math.floor(100*x/theText.length)) +"'>"+theText.charAt(x)+"</font>";
    	return str;
    }
    </script>
    
    
    </head>
    
    <body bgcolor="#000000" text="#FFFFFF" style="font-family:Arial;font-size:10;">
    <center>
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
    <script>document.write(textBar("____________________________________________", "000000", "FF0000"));</script
    ><script>document.write(textBar("____________________________________________", "FF0000", "000000"));</script>
    <br>
    <br>
    <script>document.write(textBar("Welcome to my website. Here you will find many interesting, ", "990000", "FFFF00"));</script
    ><script>document.write(textBar("exciting and sometimes usefull items for your own website.", "FFFF00", "007700"));</script>
    <br>
    
    <script>document.write(textBar("____________________________________________", "000000", "FF0000"));</script
    ><script>document.write(textBar("____________________________________________", "FF0000", "000000"));</script>
    <br>
    </center>
    </body>
    </html>

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Posts
    166
    Thanks
    0
    Thanked 0 Times in 0 Posts
    RoyW

    Neat script. Think you could tweak the code to make it work as a class file so it could be used, example for a table or td fading background?

    The result would be a clone to Microsoft's DXImageTransform Gradient, which doesn't work with NN, but your script worked fine in IE and NN (though slower to load), and most likely other browsers as well.

    The classid for the gradient, as used in a css, is:

    .bCol { filter: clsid:623e2882-fc0e-11d1-9a77-0000f8756a10
    (startColorstr:#000066, endColorstr:#0000ff, gradientType:0); }

    The above fade can be vertical or horizontal Type:1.

    Any chance it can be done while still keeping the script relatively simple?

    Thanks,
    PauletteB

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Atlanta, GA.
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't think you can mix javascript and CSS like that. The only thing I could suggest is to create 2 layers. one holding the fade and then layer the text on top.

    Here is a demo of a background fade but I haven't put a layer over the top.

    http://www.javascript-fx.com/post/co...de/fader4.html

    I also put some online demos of the above faders demos just for those too lazy to cut'n'paste
    demo 1
    demo 2
    demo 3
    The answer does not come from thinking outside the box, it comes from realizing the truth :-
    "There Is No Box". [JavaScript Gadgets'n'Gizmos][JavaScript-FX]

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Posts
    166
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Appreciate your demo & scripts.

    Thanks...

    PauletteB

  • #11
    Regular Coder
    Join Date
    Feb 2003
    Posts
    101
    Thanks
    0
    Thanked 0 Times in 0 Posts
    great script!
    can someone convert it to PHP? plz?

    [EDITED]
    found
    if anyone interesting:
    http://www.zend.com/codex.php?id=520&single=1
    Last edited by V@no.; 05-27-2003 at 10:59 PM.


  •  

    Posting Permissions

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