XY Axis Parallax w/ Five Layers

Fun little script/algorithm for parallax controls

by Pete Fecteau

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>BTN DOTS</title>
</head>
<body>
<div id="shift">
  <div id="layer_one">
    <div id="layer_two">
      <div id="layer_three">
          <div id="layer_four">
            <div id="layer_five">
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

CSS

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
#shift {
  position:absolute;
    top:-50px;
    left:-50px;
    bottom:-50px;
    right:-50px;
}
#layer_one, #layer_two, #layer_three, #layer_four, #layer_five  {
    position:fixed;
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    z-index:0;
}
#layer_one {
    background:url(https://buttonpresser.com/DEV/parallax/001.png) repeat #FFF;
}
#layer_two {
    background:url(https://buttonpresser.com/DEV/parallax/002.png) repeat;
    background-position: 0 0;
}
#layer_three {
    background:url(https://buttonpresser.com/DEV/parallax/003.png) repeat;
    background-position: 0 0;
}
#layer_four {
    background:url(https://buttonpresser.com/DEV/parallax/004.png) repeat;
    background-position: 0 0;
}
#layer_five {
    background:url(https://buttonpresser.com/DEV/parallax/005.png) repeat;
    background-position: 0 0;
}
#wrapper {
    position:absolute;
    top:80px;
    left:50%;
    bottom:100px;
    margin-left:-480px;
    width:960px;
    background-color:#777;
    -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
    -moz-box-shadow: 0px 3px 3px #666;
    -webkit-box-shadow: 0px 3px 3px #666;
    box-shadow: 0px 3px 3px #666;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#666666')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#666666');
}

JavaScript

function preloader() {
    var i = 0;
    imageObj = new Image();
    images = new Array();
    images[0]="http://buttonpresser.com/DEV/parallax/001.png"
    images[1]="http://buttonpresser.com/DEV/parallax/002.png"
    images[2]="http://buttonpresser.com/DEV/parallax/003.png"
    images[3]="http://buttonpresser.com/DEV/parallax/004.png"
    images[4]="http://buttonpresser.com/DEV/parallax/005.png"
    for(i=0; i<=5; i++) {imageObj.src=images[i];}
} 
preloader();

jQuery(document).ready(function(){
   $(document).mousemove(function(mouse){
    var winW = window.innerWidth;
    var winWHalf = winW/2;
    var mouseXNew = mouse.pageX - winWHalf;
    
    var winH = window.innerHeight;
    var winHHalf = winH/2;
    var mouseYNew = mouse.pageY - winHHalf;
            
    var winW120 = winW * 1.200;
    var winW140 = winW * 1.400;
    var winW160 = winW * 1.600;
    var winW180 = winW * 1.800;
    var winW200 = winW * 2.000;
            
    var winH120 = winH * 1.200;
    var winH140 = winH * 1.400;
    var winH160 = winH * 1.600;
    var winH180 = winH * 1.800;
    var winH200 = winH * 2.000;
            
    var layerOneX = ((mouseXNew * .004) * -1);
    var layerTwoX = ((mouseXNew * .008) * -1);
    var layerThreeX = ((mouseXNew * .012) * -1);
    var layerFourX = ((mouseXNew * .016) * -1);
    var layerFiveX = ((mouseXNew * .02) * -1);
            
    var layerOneY = ((mouseYNew * .004) * -1);
    var layerTwoY = ((mouseYNew * .008) * -1);
    var layerThreeY = ((mouseYNew * .012) * -1);
    var layerFourY = ((mouseYNew * .016) * -1);
    var layerFiveY = ((mouseYNew * .02) * -1);
            
    $('body').css({'width': winW, 'height': winH});
    $('#layer_one').css({
        'marginLeft': layerOneX,
        'marginTop': layerOneY,
        'width': winW120,
        'height': winH120,
        });
    $('#layer_two').css({
        'marginLeft': layerTwoX,
        'marginTop': layerTwoY,
        'width': winW140,
        'height': winH140,
        });
   ...