Het geanimeerde natte vloer script is foutloos volgens JSLint. Om de procedure op jouw pagina te plaatsen moet je de regels html-code in de body-sectie plaatsen. Dit geldt ook voor het javascript wat zo laag mogelijk in de body sectie terecht moet komen. In het script moet je de correcte hoogte en breedte van de, door jou gebruikte, afbeelding ingeven, en alle verdere instellingen (zoals opacity, snelheid etc.) zijn ook naar jouw eigen smaak in te stellen.
<div id="animated_wet_floor">
<img src="http://static.dns5.nl/animated-floor.jpg" width="135" height="300" alt="animated wet floor" />
</div>
<script>
var afbeelding = 'http://static.dns5.nl/animated-floor.jpg';
var het_id = "animated_wet_floor";
var breedte_plaatje = 135;
var hoogte_plaatje = 300;
var begin_hoogte_effect = 190;
var effect_vloer = hoogte_plaatje;
var doorzichtigheid = 70,
effect_hoogte = 10,
effect_breedte = 3,
vertraging = 80,
vloer_effect = effect_vloer - begin_hoogte_effect,
nummer_van_id = 0,
resultaat,
vloer_factor,
floor_hoogte,
floor_hoogste_top,
clip_breedte_plaatje,
wet_floor_top,
a,
i,
m;
vloer_factor = vloer_effect / begin_hoogte_effect;
floor_hoogte = hoogte_plaatje * vloer_factor;
floor_hoogste_top = begin_hoogte_effect - vloer_effect;
clip_breedte_plaatje = breedte_plaatje - effect_breedte * 2;
resultaat = "<div id='base' style=\"position:absolute; top:0px; left:0px; width:" + breedte_plaatje + "px; height:" + begin_hoogte_effect + "px; clip:rect(0px," + clip_breedte_plaatje + "px," + begin_hoogte_effect + "px," + effect_breedte + "px); z-index:1;\"><img src='" + afbeelding + "' width='" + breedte_plaatje + "px' height='" + hoogte_plaatje + "px'/></div>";
resultaat += "<div id='reflect' style=\"position:absolute; top:" + floor_hoogste_top + "px; left:0px; width:" + breedte_plaatje + "px; height:" + hoogte_plaatje * 2 + "px; clip:rect(0px," + clip_breedte_plaatje + "px," + hoogte_plaatje * 2 + "px," + effect_breedte + "px); z-index:3; overflow:hidden;\">";
for (i = 1; i <= effect_hoogte; i += 1) {
resultaat += "<div id='floor_nummer" + i + "' style=\"position:absolute; top:0; left:0; width:" + breedte_plaatje + "px; height:" + hoogte_plaatje * 2 + "px; z-index:3;\">";
for (a = i; a <= vloer_effect; a += effect_hoogte) {
wet_floor_top = vloer_effect * 2 - a * 2 + (1 * 1);
nummer_van_id += 1;
resultaat += "<div id='plaatnum" + nummer_van_id + "' style=\"position:absolute; top:" + wet_floor_top + "px; left:0px; width:" + breedte_plaatje + "px; height:" + a + "px; clip:rect(" + (a - 1) + "px," + breedte_plaatje + "px," + a + "px,0px); z-index:3; overflow:hidden;\"><img src='" + afbeelding + "' width='" + breedte_plaatje + "px' height='" + floor_hoogte + "px'></div>";
}
resultaat += "</div>";
}
resultaat += "</div>";
function $(obj) {
return document.getElementById(obj);
}
var floor_array = [],
floor_arraymeer = Math.PI * 2 / (effect_hoogte - 1),
b = 1;
for (a = 1; a <= effect_hoogte; a++) {
floor_array[floor_array.length] = Math.sin(floor_arraymeer * a) * effect_breedte;
}
function start_wet_floor() {
if (b <= effect_hoogte) {
$('floor_nummer' + b).style.left = Math.ceil(floor_array[b - 1]) + "px";
b += 1;
start_wet_floor();
} else {
b = 1;
floor_array = floor_array.slice(1, floor_array.length);
floor_array[floor_array.length] = floor_array[0];
setTimeout(function() {
start_wet_floor();
},
vertraging);
}
}
function doe_opacity() {
for (m = 1; m <= vloer_effect; m += 1) {
$('plaatnum' + m).style.MozOpacity = doorzichtigheid / 100;
$('plaatnum' + m).style.opacity = doorzichtigheid / 100;
$('plaatnum' + m).style.filter = "alpha(opacity=" + doorzichtigheid + ")";
}
}
function start_floor_effect() {
$(het_id).style.position = "relative";
resultaat += "<div style=\"position:relative;height:" + hoogte_plaatje + "px\"></div>";
$(het_id).innerHTML = resultaat;
doe_opacity();
start_wet_floor();
}
onload = start_floor_effect;
</script>