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.
/***********************************************
*
* 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))}
/************************************************/
<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>
<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>
beetle 08-22-2002, 10:57 PM Cool!
Just a quick FYIfunction dec2hex(dec){return dec.toString(16);} in place of function dec2hex(dec){return(hexDigit[dec>>4]+hexDigit[dec&15]);}
Cheers :D
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>
beetle 08-23-2002, 03:16 AM Ah, I see.
function dec2hex(dec){return "0" + dec.toString(16).toUpperCase();}
Seems to work too :D
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.
<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> </p><p> </p><p> </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>
PauletteB 08-24-2002, 05:17 PM 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
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/codeforums/colorfade/fader4.html
I also put some online demos of the above faders demos just for those too lazy to cut'n'paste :)
demo 1 (http://www.javascript-fx.com/post/codeforums/colorfade/fader1.html)
demo 2 (http://www.javascript-fx.com/post/codeforums/colorfade/fader2.html)
demo 3 (http://www.javascript-fx.com/post/codeforums/colorfade/fader3.html)
PauletteB 08-26-2002, 08:52 PM Appreciate your demo & scripts.
Thanks...
PauletteB
V@no. 05-27-2003, 05:24 PM great script!
can someone convert it to PHP? plz? ;)
[EDITED]
found :D
if anyone interesting:
http://www.zend.com/codex.php?id=520&single=1
|
|
