Shimmering Links

Phil Reeve Jun 3, 2003

Spruce up your navigation links with this magical shimmering effect! Works in most any browser.

JavaScriptSource
JavaScript.com
JavaScripts
JavaBoutique
Web Developers Virtual Library
WebDevelopersJournal

The JavaScript Source: Navigation: Shimmering Links

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- ONE STEP TO INSTALL SHIMMERING LINKS:

1.  Copy the coding into the BODY of your HTML document  -->

<BODY>

body { background-color:#ffcc77; font-family:"Verdana", sans-serif; font-size:20px; font-weight:bold;}

a.links{ font-family:"Verdana", sans-serif; font-size:20px; line-height:30px; color:black; text-decoration:none; font-weight:bold;}

a.links:active { color:black; }

a.links:hover { }

</style>

<!--

///////////////////Hex Conversions/////////////////////

// convert a single digit (0 - 16) into hex

function enHex(aDigit)

{

return("0123456789ABCDEF".substring(aDigit, aDigit+1))

}

// convert a hex digit into decimal

function deHex(aDigit)

{

return("0123456789ABCDEF".indexOf(aDigit))

}

// Convert a 24bit number to hex

function toHex(n)

{

return (enHex((0xf00000 & n) >> 20) +

enHex((0x0f0000 & n) >> 16) +

enHex((0x00f000 & n) >> 12) +

enHex((0x000f00 & n) >>  8) +

enHex((0x0000f0 & n) >>  4) +

enHex((0x00000f & n) >>  0))

}

// Convert a six character hex to decimal

function toDecimal(hexNum)

{

var tmp = ""+hexNum.toUpperCase()

while (tmp.length < 6) tmp = "0"+tmp

return ((deHex(tmp.substring(0,1)) << 20) +

(deHex(tmp.substring(1,2)) << 16) +

(deHex(tmp.substring(2,3)) << 12) +

(deHex(tmp.substring(3,4)) << 8) +

(deHex(tmp.substring(4,5)) << 4) +

(deHex(tmp.substring(5,6))))

}

///////////////////Shimmering Links/////////////////////

//global variables

var hoverColour

var numLinks;

var rate;

var numFadeLevels;

var bgR;

var bgG;

var bgB;

var currR;

var currG;

var currB;

var count;

var fadeOut;

var continuous;

var newColour;

var tID;

var redInterval;

var greenInterval;

var blueInterval;

function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)

{

hoverColour = mouseOverColour;

numLinks = numberOfLinks;

rate = 1;

numFadeLevels = 30;

function initArray(theArray, length, val)

{

for(i=0;i<length;i++)

{

theArray[i] = val;

}

bgR = '0000' + fadeOutColour.substring(1,3)

bgG = '0000' + fadeOutColour.substring(3,5)

bgB = '0000' + fadeOutColour.substring(5,7)

currR = new Array(numLinks);

currG = new Array(numLinks);

currB = new Array(numLinks);

count = new Array(numLinks);

fadeOut = new Array(numLinks);

continuous = new Array(numLinks);

newColour = new Array(numLinks);

tID = new Array(numLinks);

redInterval = toDecimal(bgR) / numFadeLevels;

greenInterval = toDecimal(bgG) / numFadeLevels;

blueInterval = toDecimal(bgB) / numFadeLevels;

initArray(currR,numLinks,0);

initArray(currG,numLinks,0);

initArray(currB,numLinks,0);

initArray(count,numLinks,0);

initArray(fadeOut,numLinks,true);

initArray(continuous,numLinks,true);

}

function startFade(id)

{

if(fadeOut[id] == true)

{ /*move colour towards background colour (increment)*/

currR[id] += redInterval;

currG[id] += greenInterval;

currB[id] += blueInterval;

newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);

if(++count[id] == numFadeLevels)

{

fadeOut[id] = false;

}

else

{

currR[id] -= redInterval;

currG[id] -= greenInterval;

currB[id] -= blueInterval;

newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);

if(--count[id] == 0)

{

fadeOut[id] = true;

}

if(continuous[id] == true)

{

document.getElementById(id).style.color = newColour[id];

}

else

{

document.getElementById(id).style.color = hoverColour;

}

clearTimeout(tID[id]);

tID[id]=setTimeout('startFade(' + id + ')', rate);

}

function continueFade(id)

{

continuous[id] = true;

}

function stopFade(id)

{

continuous[id] = false;

}

function StartTimers()

{	//set up an initial set of timers to start the shimmering effect

for(id=0; id<numLinks; id++)

{

t=setTimeout('startFade(' + id + ')', id*100);

}

//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')

initLinks('#FFFFFF', 6, '#FFCC77');

//-->

</script>

Shimmering Links Example.

<br>

<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://www.javascriptsource.com/">JavaScriptSource</a>

<br>

<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://www.javascript.com/">JavaScript.com</a>

<br>

<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://www.javascripts.com/">JavaScripts</a>

<br>

<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://javaboutique.internet.com/">JavaBoutique</a>

<br>

<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://wdvl.internet.com/">Web Developers Virtual Library</a>

<br>

<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">WebDevelopersJournal</a>

<br>

<!--

setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering

//-->

</script>

<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>

by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Shimmering Links

Leave a Response

Attention JavaScript Coders

Go Deeper