Parallax Effect

Javascript Parallax with 2 images

HTML

<div id="area"><div id="bg">
    <div id="fg"></div>
</div></div>

CSS

#area {
    margin:0px auto;
    width: 500px;
    height: 400px;
    background: #333;
}

#bg {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    height: 282px;
    width: 426px;
    background: url('http://dl.dropbox.com/u/6913105/parralax1.png') no-repeat;
}

#fg {
    position: relative;
    top: 143px;
    left: 30px;
    z-index: 2;
    height: 183px;
    width: 113px;
    -webkit-transform: rotateY(0deg);
    background: url('http://dl.dropbox.com/u/6913105/parralax2.png') no-repeat;
}

JavaScript

var area = document.getElementById('area');
var background = document.getElementById('bg');
var foreground = document.getElementById('fg');

window.onmousemove = function(event) {
    background.style.left = (event.clientX * 0.02) + 'px';
    foreground.style.left = (event.clientX * 0.01 + 26) + 'px';
    //foreground.style.WebkitTransform ="rotateY("+(event.clientX*0.09)+"deg)";
}