Als jouw javascript ingeschakeld stond, heb je het transitie-effect al gezien. Wil je deze procedure op jouw webruinte gebruiken hoef je alleen maar het onderstaande javascript zo laag mogelijk in de body-sectie van jouw pagina te plaatsen. Je kan een paar parameters veranderen in het script. Kijk even bij de variabele de_css_transitie. Het script is foutloos volgens JSLint, en voor al de andere validators is de pagina ook geheel "groen".
<script>
var de_css_transitie = "#box_in{margin:0;background:#dddddd;position:absolute;top:0;left:0;width:100%;height:100%;}",
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
stijl_element.styleSheet.cssText = de_css_transitie;
} else {
stijl_element.appendChild(document.createTextNode(de_css_transitie));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
var i = 100,
box_object,
stop_transition,
positie_links = 0,
box_top = 0;
function transition_box_in(elementid) {
stop_transition = setInterval("transition_met('" + elementid + "')", 30);
}
function transition_met(box_object) {
box_object = document.getElementById(box_object);
box_object.style.width = i + "%";
box_object.style.height = i + "%";
box_object.style.left = positie_links + "%";
box_object.style.top = box_top + "%";
if (i < 4) {
clearInterval(stop_transition);
box_object.style.border = "0px";
box_object.style.width = "0px";
box_object.style.zIndex = -1;
return;
}
i = i - 4;
positie_links = positie_links + 2;
box_top++;
}
setTimeout(function() {
transition_box_in('box_in');
},
700);
</script>