parallax - javascript

uitleg parallax procedure

Als je de pagina naar beneden scrollt, zal je zien dat de achtergrond (met de blauwe strepen) langzamer beweegt dan de box met deze tekst er in. In plaats van de achtergrond en deze "box", kan je natuurlijk alles (elke tag etc.) wat je een id kan geven dit parallax-effect geven.

De stylesheet behoort in de head-sectie van de pagina thuis, en de html-code en het stukje javascript in de body-sectie. Probeer het javascript zo laag mogelijk te plaatsen. Het script, de stylesheet, en de html(5) valideert geheel. Als je de code hier beneden kopieert, kan het zijn dat de "overflow:hidden" van de text-box een stukje code verbergt. Geen probleem... gewoon het script copy/paste'n. De verborgen tekst laat zich gewoon kopieren. Op jouw pagina zal je geen last van dit probleem hebben. Het probleem doet zich op deze pagina voor omdat de code met een pre geplaatst is.

html code voor het parallax voorbeeld


<div id="parallax_background">
        <div id="parallax_tekst">
                Hier alle tekst en afbeeldingen van de pagina.
        </div>
</div>

stylesheet van het parallax gebeuren


<style type="text/css">
        #parallax_background{
                background-image:url(parallax.png);
                background-repeat:repeat;
                background-attachment:fixed;
                background-position:center top;
                margin:auto}
        #parallax_tekst{
                background:#f5f5ff;
                color:inherit;
                padding:1em;
                margin:auto;
                width:60%;
                height:1800px;
                border:solid 1px #808080}
</style>

javascript voor de parallax procedure


<script>
/*global window: false */
/*global document: false */
function parallax(hoogte, snelheid_ratio, scroll_positie) {
    return (hoogte - (Math.floor(scroll_positie / snelheid_ratio) % (hoogte + 1)));
}
window.onload = function () {
    window.onscroll = function () {
        var positie = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
        var parallax_object = document.getElementById('parallax_background');
        var bereken_parallax = parallax(40, 12, positie);
        parallax_object.style.backgroundPosition = "center " + bereken_parallax + "px";
    };
};
</script>

KOMPOOS.NL