parallax

by TastyBytes

HTML

<div id="bg1"></div>
<div id="bg2"></div>
<div id="bg3"></div>

CSS

#bg1 {
    position: absolute;
    top: 0; left:0;
    width: 100%;
    height: 10000px;
    background: url( http://labs.tastybytes.net/img/parallax1.png ) 50px 0 no-repeat fixed;
}
#bg2 {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 10000px;
    background: url( http://labs.tastybytes.net/img/parallax2.png ) 150px 0 no-repeat fixed;
}
#bg3 {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 10000px;
    background: url( http://labs.tastybytes.net/img/parallax3.png ) 260px 0 no-repeat fixed;
}

JavaScript

window.onscroll = parallax;

parallaxBG = [ 
    [ document.getElementById('bg1'), 1 ],
    [ document.getElementById('bg2'), .5 ],
    [ document.getElementById('bg3'), .2 ]
];


function parallax(e) {
    parallaxBG[0][0].style.backgroundPosition = "50px -" + (window.pageYOffset * parallaxBG[0][1]) + "px";
    parallaxBG[1][0].style.backgroundPosition = "150px -" + (window.pageYOffset * parallaxBG[1][1]) + "px";
    parallaxBG[2][0].style.backgroundPosition = "260px -" + (window.pageYOffset * parallaxBG[2][1]) + "px";
    //console.log("PARALLAX!",e);
}