Paralax

by Anton Kolesnikov

HTML

<body>
    <div id="bg">
    </div>
    <input id = "mouseX">
    <input id = "mouseY">    
</body>

CSS

body {
    width:100%;
    height: 100%;
}
#bg {
    width: 100px;
    height: 50px;
    background: Navy;
    position: absolute;
}

JavaScript

document.onmousemove = function(e) {
  e = e || window.event;
  fixPageXY(e);

  document.getElementById('mouseX').value = e.pageX;
  document.getElementById('mouseY').value = e.pageY;
    
    document.getElementById('bg').style.left = document.body.clientWidth/2 - (document.body.clientWidth/2 - e.pageX)/2 - 50 + 'px';    
    
}
function fixPageXY(e) {
  if (e.pageX == null && e.clientX != null ) { // если нет pageX..
    var html = document.documentElement;
    var body = document.body;

    e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
    e.pageX -= html.clientLeft || 0;
    
    e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
    e.pageY -= html.clientTop || 0;
  }
}
document.getElementById('bg').style.top = '100px';
document.getElementById('bg').style.left = document.body.clientWidth / 2 - 50 + 'px';