KOMPOOS.NL

page transition - cross browser

home » javascripts » transitions » page-transition.html

transitie via een link (de link werkt ook zonder javascript)

uitleg page transition procedure

Gebruik deze transitie niet klakkeloos op jouw gehele website. Geen enkele bezoeker zit op vertraging van het laden van pagina's te wachten. Als je een doel voor deze (cross browser) transitie hebt gevonden, kan je het eerste javascript in de head-sectie van jouw pagina('s) plaatsen, en het tweede javascript zo laag als mogelijk in de body-sectie. Direct onder de body-tag moet een div komen zoals op de volgende regel is aangegeven

<div id="transitie"></div>

Helemaal onderaan deze pagina staan twee voorbeeld-regels om de fade-out procedure te kunnen starten. Je kan de code natuurlijk geheel aanpassen aan jouw eigen wensen. Alle javascript op deze pagina is foutloos volgens de JSLint-norm.

het transition-javascript voor de head-sectie


<script>
var de_css_code = 'body{visibility:hidden}#transitie{margin:0;background:#fff;position:absolute;top:0;left:0;width:100%;height:100%;}</style>',
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
    stijl_element.styleSheet.cssText = de_css_code;
} else {
    stijl_element.appendChild(document.createTextNode(de_css_code));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
</script>

transition-javascript voor onderaan de body-sectie.


<script>
/*global window: false */
var transition_element_twee = "transitie",
transition_element = transition_element_twee;
var i = 100,
x,
b,
transition_out;
var i4 = 0,
x4,
b4,
transition_in;
function beginnen() {
    transition_out = setInterval("transition_een('" + transition_element + "')", 1);
}
function transition_een(x) {
    x = document.getElementById(x);
    b = i / 10;
    document.body.style.visibility = "visible";
    x.style.opacity = b / 10;
    x.style.filter = 'alpha(opacity=' + b * 10 + ')';
    if (i < 4) {
        x.style.filter = 'alpha(opacity=0)';
        x.style.opacity = 0;
        clearInterval(transition_out);
        x.style.zIndex = -1;
        i = 100;
        return;
    }
    i = i - 4;
}
function transition_naar(naar_url) {
    i4 = 0;
    transition_in = setInterval("transition_twee('" + transition_element_twee + "','" + naar_url + "')", 1);
}
function transition_twee(x4, de_url) {
    x4 = document.getElementById(x4);
    x4.style.zIndex = 1;
    b4 = i4 / 10;
    x4.style.opacity = b4 / 10;
    x4.style.filter = 'alpha(opacity=' + b4 * 10 + ')';
    if (i4 > 98) {
        clearInterval(transition_in);
        location.href = de_url;
        return (true);
    }
    i4 = i4 + 4;
}
window.onload = beginnen;
</script>

1^e html voorbeeld regel voor de transition


<input type="button" value="DOE DE TRANSITION" onclick="transition_naar('http://kompoos.nl/javascripts/transitions/page-transition.html');">

2^e html voorbeeld regel voor de transition


<a href="/javascripts/transitions/page-transition.html" onclick="transition_naar('http://kompoos.nl/javascripts/transitions/page-transition.html');return(false);"><small>transitie via een link (de link werkt ook zonder javascript)</small></a>