Het curtain-javascript is foutloos volgens de strenge JSLint-norm. Om deze procedure op jouw pagina te gebruiken moet je een stukje javascript in de head-sectie plaatsen, een regel html-code (met twee div's) direct onder de body-start-tag zetten, en nog een javascript wat je ook in de body (zo laag als mogelijk) moet plaatsen.
<script>
var de_css_code = ".curtain_transition{position:absolute;left:0px;top:300px;background-color:#aaaaaa;z-index:999;",
het_style_element = document.createElement("style");
het_style_element.type = "text/css";
if (het_style_element.styleSheet) {
het_style_element.styleSheet.cssText = de_css_code;
} else {
het_style_element.appendChild(document.createTextNode(de_css_code));
}
document.getElementsByTagName("head")[0].appendChild(het_style_element);
</script>
<div id="i1" class="curtain_transition"></div><div id="i2" class="curtain_transition"></div>
<script>
/*global window: false */
var viewport_breedte;
var viewport_hoogte;
if (typeof window.innerWidth != 'undefined') {
viewport_breedte = window.innerWidth;
viewport_hoogte = window.innerHeight;
} else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth !== 0) {
viewport_breedte = document.documentElement.clientWidth;
viewport_hoogte = document.documentElement.clientHeight;
} else {
viewport_breedte = document.getElementsByTagName('body')[0].clientWidth;
viewport_hoogte = document.getElementsByTagName('body')[0].clientHeight;
}
var i,
bovenkant = 0,
set_de_interval,
strikt = document.getElementById && !document.all ? 1: 0;
var pixels_per_stap = 10,
objekt = [],
onderkant = strikt ? parseInt(window.innerHeight, 10) / 2: viewport_hoogte / 2;
for (i = 1; i <= 2; i++) {
objekt[i] = document.getElementById("i" + i).style;
objekt[i].width = strikt ? (window.innerWidth - 15) + 'px': document.body.clientWidth;
objekt[i].height = strikt ? (window.innerHeight / 2) + 'px': viewport_hoogte / 2;
objekt[i].top = (i - 1) * parseInt(objekt[i].height, 10) + 'px';
}
function curtain_transition_open() {
window.scrollTo(0, 0);
onderkant -= pixels_per_stap;
objekt[1].clip = "rect(0px auto " + onderkant + "px 0)";
bovenkant += pixels_per_stap;
objekt[2].clip = "rect(" + bovenkant + "px auto auto auto)";
if (onderkant <= -5) {
clearInterval(set_de_interval);
objekt[1].display = "none";
objekt[2].display = "none";
}
}
function start_transition() {
set_de_interval = setInterval(function() {
curtain_transition_open();
},
1);
}
window.onload = start_transition;
</script>