In het javascript, wat hieronder staat, zie je (in de eerste 10 regels) de array "link_kleur_doos" staan. Aan de array is daar toegevoegd blauw, rood, groen en multi. In elk item zie je de "hex-code" van kleuren staan. In elk item staan op dit moment 3 kleuren. Ik denk dat duidelijk is dat het kleurverloop van de link(s) door deze data bepaald wordt. Je kan zo veel kleurcodes toevoegen als je wilt. Je kan ook een nieuwe class "aanmaken" door achter link_kleur_doos. een nieuwe "naam" te zetten. (b.v. link_kleur_doos.oranje)
Om een willekeurige link (het aantal is onbeperkt) te laten "color-faden", hoef je alleen maar aan de/een a-tag de class x (kies op deze pagina uit blauw, rood, groen of multi) te geven. Als voorbeeld:
<a class="multi" href="/javascripts/text-effects/link-color-fader.html">link-color-fader.html</a>
Het enige wat nog te melden is, is dat het javascript foutloos is, volgens de strenge JSLint-norm, en dat voor het overige de gehele pagina (html en CSS) "W3C" valideert.
<script>
/*global window: false */
/*global document: false */
/*global setTimeout: false */
var link_kleur_doos = [],
i;
link_kleur_doos.blauw = ["385CFF", "356C91", "5956FF"];
link_kleur_doos.rood = ["BA1930", "BA6B30", "FF4F95"];
link_kleur_doos.groen = ["2A8727", "2A8768", "45873C"];
link_kleur_doos.multi = ["FFAF11", "75CAFF", "FF5BA5"];
function hexnaardec(hex) {
return (parseInt(hex, 16));
}
function decnaarhex(dec) {
return (dec < 16 ? "0" : "") + dec.toString(16);
}
function haal_link_kleuren(begin, eind, procent) {
var fade_waarde_1 = hexnaardec(begin.slice(0, 2)),
begin_waarde = hexnaardec(begin.slice(2, 4)),
muteer = hexnaardec(begin.slice(4, 6));
var fade_waarde_2 = hexnaardec(eind.slice(0, 2)),
eind_waarde = hexnaardec(eind.slice(2, 4)),
eind_bd = hexnaardec(eind.slice(4, 6));
var fade_procent = procent / 100;
var color_fader_waarde = Math.floor(fade_waarde_1 + (fade_procent * (fade_waarde_2 - fade_waarde_1)) + 0.5),
b_waarde = Math.floor(begin_waarde + (fade_procent * (eind_waarde - begin_waarde)) + 0.5),
e_waarde = Math.floor(muteer + (fade_procent * (eind_bd - muteer)) + 0.5);
return ("#" + decnaarhex(color_fader_waarde) + decnaarhex(b_waarde) + decnaarhex(e_waarde));
}
function verkleur_een_link(de_klas, begin, eind, bobik, snelheid) {
if (bobik === 0) {
begin = eind;
eind = (eind + 1) % link_kleur_doos[de_klas].length;
}
var fade_color = haal_link_kleuren(link_kleur_doos[de_klas][begin], link_kleur_doos[de_klas][eind], bobik);
for (i = 0; i < document.links.length; i++) {
if (document.links[i].className === de_klas) {
document.links[i].style.color = fade_color;
}
}
bobik = (bobik + snelheid) % 100;
setTimeout("verkleur_een_link(\"" + de_klas + "\"," + begin + "," + eind + "," + bobik + "," + snelheid + ")", 40);
}
function link_color_fader() {
verkleur_een_link("blauw", 0, 0, 0, 1);
verkleur_een_link("rood", 0, 0, 0, 1);
verkleur_een_link("groen", 0, 0, 0, 1);
verkleur_een_link("multi", 0, 0, 0, 1);
}
window.onload = link_color_fader;
</script>