Op deze pagina staat alleen het script en de button die het script aanroept. Op de eerste twee voorbeeld-pagina's kan je vinden hoe je de procedure moet uitvoeren. Op deze pagina zijn de scripts "in-elkaar geschoven" en voeren zij alle twee de functies (op dezelfde pagina) uit. Met andere woorden: Elke pagina op jouw website die dit javascript (en link) heeft zal het transitie-effect krijgen met de horizontale bars. Op deze pagina staan hierboven (tussen de twee lijnen) de links naar de andere twee pagina's.
<input type="button" value="test de transition (deze pagina wordt afgesloten en weer ingeladen)" onclick="sluit_bar_transition();">
<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 - 30 + "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;
function sluit_bar_transition() {
var sluit_linker_clip,
sluit_rechter_clip,
sluit_i,
sluit_bar_interval,
bar_van_strict_browser = document.getElementById && !document.all ? 1: 0,
bar_sluit_snelheid = 40,
sluit_tijdelijke_bar = [],
sluit_tijdelijke_bar2 = [];
sluit_rechter_clip = 0;
sluit_linker_clip = bar_van_strict_browser ? window.innerWidth: document.body.clientWidth;
function horizontale_sluiter_bar() {
sluit_rechter_clip = sluit_rechter_clip + bar_sluit_snelheid;
for (sluit_i = 1; sluit_i <= 8; sluit_i = sluit_i + 2) {
sluit_tijdelijke_bar[sluit_i].clip = "rect(0px, " + sluit_rechter_clip + "px, auto, 0px)";
}
sluit_linker_clip = sluit_linker_clip - bar_sluit_snelheid;
for (sluit_i = 2; sluit_i <= 8; sluit_i = sluit_i + 2) {
sluit_tijdelijke_bar[sluit_i].clip = "rect(0px, auto, auto, " + sluit_linker_clip + "px)";
if (sluit_rechter_clip <= 0) {
if (bar_van_strict_browser) {
for (sluit_i = 1; sluit_i <= 8; sluit_i++) {
sluit_tijdelijke_bar[sluit_i].display = "none";
}
}
}
}
if (sluit_linker_clip < 1) {
clearInterval(sluit_bar_interval);
location.href = "http://kompoos.nl/javascripts/transitions/transition-bars.html";
}
}
for (sluit_i = 1; sluit_i <= 8; sluit_i++) {
sluit_tijdelijke_bar[sluit_i] = document.getElementById("bar_horizontaal_" + sluit_i).style;
sluit_tijdelijke_bar[sluit_i].width = bar_van_strict_browser ? window.innerWidth - 15 + "px": document.body.clientWidth + "px";
sluit_tijdelijke_bar[sluit_i].height = bar_van_strict_browser ? window.innerHeight / 8 + "px": (document.documentElement.clientHeight / 8) + "px";
sluit_tijdelijke_bar[sluit_i].top = ((sluit_i - 1) * parseInt(sluit_tijdelijke_bar[sluit_i].height, 10)) + "px";
}
sluit_bar_interval = setInterval(function() {
horizontale_sluiter_bar();
},
1);
}
</script>