Plaats de beide javascripts op de pagina waar je het "rainbow-effect" wilt gebruiken. De eerste in de head-sectie van de pagina en de tweede zo laag als mogelijk in de body-sectie. De html-regels plaats je in de body waar het effect moet komen. Alles wat je tussen <span id="rainbow_text"> en </span> plaatst, zal het effect mee-krijgen. In het onderste script staat de regel
maak_rainbow = new maak_rainbow(regenboog, 20, 2, 200, 120, 150);
Het getal 120 staat voor de helderheid en kan de waarde 0 t/m 255 hebben. De 150 staat voor de snelheid van het verkleuren van de letters. De hue en de breedte van het kleurvlak kan je met de overige parameters veranderen, Experimenteer met de waarden om een gewenst effect te krijgen. Het script is foutloos volgens de strenge JSLint-norm.
<script>
/*global window: false */
var rood, groen, blauw, i;
function rainbow_span(de_span) {
var kleur_string = de_span.firstChild.data;
var aantal_letters = kleur_string.length;
de_span.removeChild(de_span.firstChild);
for (i = 0; i < aantal_letters; i++) {
var kleur_span = document.createElement("kleur");
kleur_span.appendChild(document.createTextNode(kleur_string.charAt(i)));
de_span.appendChild(kleur_span);
}
}
function maak_rainbow(de_span, hue_snelheid, hue, aantal_graden, helderheid_kleur, de_snelheid) {
this.aantal_graden = (aantal_graden === null ? 360: Math.abs(aantal_graden));
this.hue = (hue === null ? 0: Math.abs(hue) % 360);
this.hue_snelheid = (hue_snelheid === null ? 3: Math.abs(hue_snelheid) % 360);
this.length = de_span.firstChild.data.length;
this.de_span = de_span;
this.snelheid = (de_snelheid === null ? 50: Math.abs(de_snelheid));
this.bereken = this.aantal_graden / this.length;
this.helderheid_kleur = (helderheid_kleur === null ? 255: Math.abs(helderheid_kleur) % 256);
this.timer = null;
rainbow_span(de_span);
this.rainbow_kleuren();
}
maak_rainbow.prototype.rainbow_kleuren = function() {
if (this.hue > 359) {
this.hue -= 360;
}
var _kleur,
helderheid = this.helderheid_kleur,
aantal_letters = this.length,
de_hue = this.hue;
for (i = 0; i < aantal_letters; i++) {
if (de_hue > 359) {
de_hue -= 360;
}
if (de_hue < 60) {
_kleur = Math.floor(((de_hue) / 60) * helderheid);
rood = helderheid;
groen = _kleur;
blauw = 0;
} else if (de_hue < 120) {
_kleur = Math.floor(((de_hue - 60) / 60) * helderheid);
rood = helderheid - _kleur;
groen = helderheid;
blauw = 0;
} else if (de_hue < 180) {
_kleur = Math.floor(((de_hue - 120) / 60) * helderheid);
rood = 0;
groen = helderheid;
blauw = _kleur;
} else if (de_hue < 240) {
_kleur = Math.floor(((de_hue - 180) / 60) * helderheid);
rood = 0;
groen = helderheid - _kleur;
blauw = helderheid;
} else if (de_hue < 300) {
_kleur = Math.floor(((de_hue - 240) / 60) * helderheid);
rood = _kleur;
groen = 0;
blauw = helderheid;
} else {
_kleur = Math.floor(((de_hue - 300) / 60) * helderheid);
rood = helderheid;
groen = 0;
blauw = helderheid - _kleur;
}
de_hue += this.bereken;
this.de_span.childNodes[i].style.color = "rgb(" + rood + "," + groen + "," + blauw + ")";
}
this.hue += this.hue_snelheid;
};
</script>
<p>
<strong><span id="rainbow_text">geanimeerde regenboog lettertjes</span></strong>
</p>
<script>
var regenboog = document.getElementById("rainbow_text"),
maak_rainbow = new maak_rainbow(regenboog, 20, 2, 200, 120, 150);
maak_rainbow.timer = window.setInterval("maak_rainbow.rainbow_kleuren()", maak_rainbow.snelheid);
</script>