KOMPOOS.NL

water effect script

home » javascripts » image-effects » water-effect.html

sitemap

voorbeeld water effect

water effect

uitleg water effect procedure

Om het water effect script op jouw pagina te laten werken moet je de html-regels ergens in de body-sectie plaatsen (daar waar je de afbeelding wilt hebben), en het javascript moet je zo laag mogelijk (ook) in de body-sectie plaatsen. In het script moet je de afmetingen van het plaatje exact ingeven. Verder kan je in het script de snelheid (vertraging), opacity en golf-afmetingen bepalen. De variabelen hebben duidelijke namen. Experimenteer om het juiste effect te verkrijgen.

html voor procedure


<div id="water">
        <img src="http://static.dns5.nl/water-effect.jpg"  width="200" height="300" alt="water effect" />
</div>

javascript water-effect procedure


<script>
var afbeelding = 'http://static.dns5.nl/water-effect.jpg';
var het_id = "water";
var breedte_plaatje = 200;
var hoogte_plaatje = 300;
var begin_hoogte_effect = 185;
var effect_bodem = hoogte_plaatje;
var doorzichtigheid = 100;
var golf_hoogte = 12,
golf_breedte = 3,
vertraging = 180,
de_golfjes = effect_bodem - begin_hoogte_effect,
nummer_van_id = 0,
resultaat, a, i, m;
resultaat = "<div id='basis_div' style=\"position:absolute; top:0px; left:0px; width:" + breedte_plaatje + "px; height:" + hoogte_plaatje + "px; clip:rect(0px," + breedte_plaatje + "px," + hoogte_plaatje + "px,0px); z-index:1;\"><img src='" + afbeelding + "' width='" + breedte_plaatje + "px' height='" + hoogte_plaatje + "px'/></div>";
resultaat += "<div id='reflectie' style=\"position:absolute; top:0px; left:0px; width:" + breedte_plaatje + "px; height:" + hoogte_plaatje + "px; clip:rect(0px," + breedte_plaatje + "px," + hoogte_plaatje + "px,0px); z-index:3; overflow:hidden;\">";
for (i = 1; i <= golf_hoogte; i += 1) {
    resultaat += "<div id='golfnum" + i + "' style=\"position:absolute; top:0; left:0; z-index:3;\">";
    for (a = i; a <= de_golfjes; a += golf_hoogte) {
        resultaat += "<div style=\"position:absolute; top:0; left:0; width:" + breedte_plaatje + "px; height:" + hoogte_plaatje + "px; clip:rect(" + (begin_hoogte_effect + (a * 1) - 1) + "px," + breedte_plaatje + "px," + (begin_hoogte_effect + (a * 1)) + "px,0px); z-index:3; overflow:hidden;\"><img src='" + afbeelding + "' width='" + breedte_plaatje + "px' height='" + hoogte_plaatje + "px'/></div>";
    }
    resultaat += "</div>";
}
resultaat += "</div>";
function $(het_object) {
    return document.getElementById(het_object);
}
var de_golven = [],
de_golvenmeer = Math.PI * 2 / (golf_hoogte - 1),
b = 1;
for (a = 1; a <= golf_hoogte; a++) {
    de_golven[de_golven.length] = Math.sin(de_golvenmeer * a) * golf_breedte;
}
function maak_golf() {
    if (b <= golf_hoogte) {
        $('golfnum' + b).style.left = Math.ceil(de_golven[b - 1]) + "px";
        b += 1;
        maak_golf();
    } else {
        b = 1;
        de_golven = de_golven.slice(1, de_golven.length);
        de_golven[de_golven.length] = de_golven[0];
        setTimeout(function() {
            maak_golf();
        },
        vertraging);
    }
}
function doe_opacity() {
    for (m = 1; m <= de_golfjes; m += 1) {
        $('nummer_plaatje' + m).style.MozOpacity = doorzichtigheid / 100;
        $('nummer_plaatje' + m).style.opacity = doorzichtigheid / 100;
        $('nummer_plaatje' + m).style.filter = "alpha(opacity=" + doorzichtigheid + ")";
    }
}
function begin_effect() {
    $(het_id).style.position = "relative";
    resultaat += "<div style=\"position:relative;height:" + hoogte_plaatje + "px\"></div>";
    $(het_id).innerHTML = resultaat;
    maak_golf();
}
onload = begin_effect;
</script>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.