KOMPOOS.NL

color effect

home » javascripts » background » color-effect.html

voorbeeld achtergrond kleur effect

KOMPOOS

uitleg van de background color effect procedure

Je kan de kleurwisseling op alle tag's uitvoeren die je maar wilt. De gehele body is ook mogelijk. Maar ik raad je aan om deze procedure spaarzaam te gebruiken. Bezoekers zitten niet te wachten op fraaie kleur-wisselingen op een pagina...

Maar als je ergens een nuttig doel voor deze procedure hebt gevonden, kan je de stylesheet in de head-sectie van de pagina plaatsen en het javascript (zo laag als mogelijk) in de body-sectie. De html-regel dient als leidraad. Je hoeft alleen maar een tag o.i.d. het id "color_effect" te geven, en de rest gaat "vanzelf".

stylesheet voor de color-effect procedure


<style type="text/css">
        #color_effect{
                background:inherit;
                color:#fff;
                font-weight:bold;
                margin-left:10px;
                font-size:1.5em;
                display:block;
                width:5.5em;
                text-align:center;
                height:1.5em;
                padding:0.5em}
</style>

html regel voor de javascript background procedure


<div id="color_effect">KOMPOOS</div>

javascript voor het de background color effect procedure


<script>
/*global document: false */
/*global setTimeout: false */
/*global window: false */
var wissel_snelheid = 10;
var effect_kleuren = [];
effect_kleuren.de_effect_kleuren = ["6E0189", "660000", "6E0189", "0B01E7", "6E0189", "00BB00", "1B8963", "92000B", "6E0189", "A50055"];
function haal_kleuren_effect(begin, eind, procent) {
    'use strict';
    function hex2decimaal(hex) {
        return (parseInt(hex, 16));
    }
    function decimaal2hex(dec) {
        return (dec < 16 ? "0" : "") + dec.toString(16);
    }
    var waarde_1 = hex2decimaal(begin.slice(0, 2)),
        begwrd = hex2decimaal(begin.slice(2, 4)),
        bebwrd = hex2decimaal(begin.slice(4, 6)),
        waarde_2 = hex2decimaal(eind.slice(0, 2)),
        eindwd = hex2decimaal(eind.slice(2, 4)),
        eindbd = hex2decimaal(eind.slice(4, 6)),
        percentage = procent / 100,
        een_waarde = Math.floor(waarde_1 + (percentage * (waarde_2 - waarde_1)) + 0.5),
        begin_waarde = Math.floor(begwrd + (percentage * (eindwd - begwrd)) + 0.5),
        eind_waarde = Math.floor(bebwrd + (percentage * (eindbd - bebwrd)) + 0.5);
    return ("#" + decimaal2hex(een_waarde) + decimaal2hex(begin_waarde) + decimaal2hex(eind_waarde));
}
function verkleur(de_class, begin, eind, bobik, snelheid) {
    'use strict';
    if (bobik === 0) {
        begin = eind;
        eind = (eind + 1) % effect_kleuren[de_class].length;
    }
    var kleur_achtergrond = haal_kleuren_effect(effect_kleuren[de_class][begin], effect_kleuren[de_class][eind], bobik);
    if (document.getElementById("color_effect")) {
        document.getElementById('color_effect').style.backgroundColor = kleur_achtergrond;
    }
    bobik = (bobik + snelheid) % 100;
    setTimeout("verkleur(\"" + de_class + "\"," + begin + "," + eind + "," + bobik + "," + snelheid + ")", wissel_snelheid);
}
function start_achtergrond_kleur_effect() {
    'use strict';
    verkleur("de_effect_kleuren", 0, 0, 0, 1);
}
window.onload = start_achtergrond_kleur_effect;
</script>