Post subject: How to make the cool fading link effect like this forum?
How was the nice fading effect was done for all links in this forum or quantumcloud site? Or is it my imagination? The color seems to fade gradually from red to bright gray, not just jump from one color to another. This cannot be just a hover property! Is it? _________________ “You might say reality is the result of complex negotiations between the observer and the observed. But that is simply a point of view…”
Digital Bangladesh
Fri Sep 10, 04 3:26 am
quantum Site Admin
Joined: 07 Mar 2004 Posts: 1048
Location: Dhaka, Bangladesh
Post subject: Cool fading link javascript
The trick with the fading link color is being done with an open source Javascript. It is fairly popular too, these days I guess. You will see it used everywhere.
Here is the javascript:
Code:
fadeClasses = new Array("");
startColors = new Array("cc6600");
endColors = new Array("#33FF33");
stepIn = 15;
stepOut = 10;
autoFade = true;
sloppyClass = true;
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
{
hexa[i] = i;
}
hexa[10]="a";
hexa[11]="b";
hexa[12]="c";
hexa[13]="d";
hexa[14]="e";
hexa[15]="f";
var version = parseInt(navigator.appVersion)
var appName = navigator.appName
var n4 = version>=4 && appName=="Netscape"
function fade2(s,e, element,step)
{
var sr = s[0];
var sg = s[1];
var sb = s[2];
var er = e[0];
var eg = e[1];
var eb = e[2];
if (fadeId[0] != null && fade[0] != element)
{
setColor(sr,sg,sb,eval(fadeId[0]));
var i = 1;
while(i < fadeId.length)
{
clearTimeout(fadeId[i]);
i++;
}
}
// Gecko timeout structure
for(var i = 0; i <= step; i++)
{
fadeId[i+1] = setTimeout(
setColor,
i*step,
Math.floor(sr*((step-i)/step) + er*(i/step)),
Math.floor(sg*((step-i)/step) + eg*(i/step)),
Math.floor(sb*((step-i)/step) + eb*(i/step)),
element
);
}
fadeId[0] = element;
}
Save it in a .js file and then link to the file from the actual html or php page like this:
<script src="fade.js"></script> in the header section. That's all you need. You can change the beginning and end link colors near from the top. The variables are pretty self explanatory. _________________
Dust fills my eyes / Clouds roll by / and I roll with them / Centuries cry / Orders fly / and I fall again
Afford best design, implement best solution. Outsource your web design.
Thanks for sharing the script. The file size is large, but I think, after the first time it will be cached so no problem with that. _________________ “You might say reality is the result of complex negotiations between the observer and the observed. But that is simply a point of view…”
Digital Bangladesh
