Deze transitie dient als een "workaround" voor pagina-overgangen. Als je op een pagina (bij een onunload) deze procedure "achterstevoren" uitvoert, en vervolgens déze pagina laadt, zal je zien wat er bedoeld wordt (klik even op de button hierboven om naar de test-pagina te gaan). Om de horizontale bars te laten werken moet je de html code direct als éérste ná de body-tag plaatsen. Het javascript moet zo laag als mogelijk in de body-sectie komen te staan. De kleur van de bars kan je instellen bij de variabele css_horizontale_bar, die in het begin van het script staat. De parameter is (op deze pagina) "background" met de waarde #aaa. De snelheid van het effect kan je instellen met de variabele "bar_snelheid" welke op deze pagina op 20 staat ingesteld. Het script is foutloos volgens de strenge JSLint-norm.
<div id="bar_horizontaal_1"></div>
<div id="bar_horizontaal_2"></div>
<div id="bar_horizontaal_3"></div>
<div id="bar_horizontaal_4"></div>
<div id="bar_horizontaal_5"></div>
<div id="bar_horizontaal_6"></div>
<div id="bar_horizontaal_7"></div>
<div id="bar_horizontaal_8"></div>
<script>
/*global window: false */
var css_horizontale_bar = "#bar_horizontaal_1,#bar_horizontaal_2,#bar_horizontaal_3," +
"#bar_horizontaal_4,#bar_horizontaal_5,#bar_horizontaal_6,#bar_horizontaal_7," +
"#bar_horizontaal_8{position:absolute;background:#aaa;color:inherit}",
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
stijl_element.styleSheet.cssText = css_horizontale_bar;
} else {
stijl_element.appendChild(document.createTextNode(css_horizontale_bar));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
var clip_links,
clip_rechts,
i,
bar_interval,
bar_voor_strict_browser = document.getElementById && !document.all ? 1: 0,
bar_snelheid = 20,
tijdelijk_bar = [],
tijdelijk_bar2 = [];
clip_rechts = bar_voor_strict_browser ? window.innerWidth: document.body.clientWidth;
clip_links = 0;
for (i = 1; i <= 8; i++) {
tijdelijk_bar[i] = document.getElementById("bar_horizontaal_" + i).style;
tijdelijk_bar[i].width = bar_voor_strict_browser ? window.innerWidth - 15 + "px": document.body.clientWidth + "px";
tijdelijk_bar[i].height = bar_voor_strict_browser ? window.innerHeight / 8 + "px": (document.documentElement.clientHeight / 8) + "px";
tijdelijk_bar[i].top = ((i - 1) * parseInt(tijdelijk_bar[i].height, 10)) + "px";
}
function horizontale_bar() {
clip_rechts = clip_rechts - bar_snelheid;
for (i = 1; i <= 8; i = i + 2) {
tijdelijk_bar[i].clip = "rect(0px, " + clip_rechts + "px, auto, 0px)";
}
clip_links = clip_links + bar_snelheid;
for (i = 2; i <= 8; i = i + 2) {
tijdelijk_bar[i].clip = "rect(0px, auto, auto, " + clip_links + "px)";
if (clip_rechts <= 0) {
if (bar_voor_strict_browser) {
for (i = 1; i <= 8; i++) {
tijdelijk_bar[i].display = "none";
}
}
clearInterval(bar_interval);
}
}
}
function start_bar_transition() {
bar_interval = setInterval(function() {
horizontale_bar();
},
1);
}
window.onload = start_bar_transition;
</script>