parallax mouse move

by Snj

HTML

<div class="parallax">
    <div class="water water-layer4"></div>
    <div class="water water-layer3"></div>
    <div class="water water-layer2"></div>
    <div class="water water-layer1"></div>
</div>

CSS

.parallax {
    position: absolute;
    width: 100%;
    height: 800px;
    overflow: hidden;
    left: 0;
}
.water {
    position: absolute;
    width: 100%;
    height: 800px;
    left:0;
    background-repeat: no-repeat;
    background-position: top center;
}
.water-layer1 {
    background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-1.png);
}
.water-layer2 {
    background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-2.png);
}
.water-layer3 {
    background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-3.png);
}
.water-layer4 {
    background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-4.png);
}

JavaScript

var currentX = '';
var currentY = '';
var movementConstant = .015;
$(document).mousemove(function(e) {
  if(currentX == '') currentX = e.pageX;
  var xdiff = e.pageX - currentX;
  currentX = e.pageX;
   if(currentY == '') currentY = e.pageY;
  var ydiff = e.pageY - currentY;
  currentY = e.pageY; 
  $('.parallax div').each(function(i, el) {
      var movement = (i + 1) * (xdiff * movementConstant);
	  var movementy = (i + 1) * (ydiff * movementConstant);
      var newX = $(el).position().left + movement;
	  var newY = $(el).position().top + movementy;
      $(el).css('left', newX + 'px');
	  $(el).css('top', newY + 'px');
  });
});