X-Axis Parallax Background

Three layers. Needs an image preloader to handle the oversized images.

by Pete Fecteau

HTML

<div id="layer_one">
    <div id="layer_two">
        <div id="layer_three">
        </div>
    </div>
</div>

CSS

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
#layer_one, #layer_two, #layer_three  {
    position:fixed;
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    z-index:0;
}
#layer_one {
    background:url(http://buttonpresser.com/DEV/parallax/bg_one.png) repeat #666;
}
#layer_two {
    background:url(http://buttonpresser.com/DEV/parallax/bg_two.png) repeat;
    background-position: 0 -800px;
}
#layer_three {
    background:url(http://buttonpresser.com/DEV/parallax/bg_three.png) repeat;
    background-position: 0 0;
}

JavaScript

function preloader() {
    var i = 0;
    imageObj = new Image();
    images = new Array();
    images[0]="bg_one.png"
    images[1]="bg_two.png"
    images[2]="bg_three.png"
    for(i=0; i<=3; i++) {imageObj.src=images[i];}
} 
preloader();

jQuery(document).ready(function(){
   $(document).mousemove(function(mouse){
            var winH = window.innerHeight;
            var winH250 = winH * 1.250;
            var winH333 = winH * 1.333;
            var layerTwo = ((mouse.pageY * .02) * -1);
            var layerThree = ((mouse.pageY * .06) * -1)
            $('body').css({'width': winH});
            $('#layer_two').css({'marginTop': layerTwo, 'width': winH250});
            $('#layer_three').css({'marginTop': layerThree, 'width': winH333});
   }); 
})