Parallax Boxes

by SteppingHat

HTML

<div class="box" style="top: 50px; left: 50px;">
  Box 1
</div>

<div class="box" style="top: 50px; left: 250px;">
  Box 2
</div>

<div class="box" style="top: 50px; left: 450px;">
  Box 3
</div>

CSS

.box {
  position: absolute;
  height: 50px;
  width: 150px;
  color: white;
  background: #B00;
}

JavaScript

$('.box').each(function() {
  var location = $(this).offset();
  var locationX = location.left;
  var locationY = location.top;

  $('html').on("mousemove", function(event) {
    var mouseX = event.pageX;
    var mouseY = event.pageY;

    var offsetX = (locationX - mouseX) / 50;
    var offsetY = (locationY - mouseY) / 50;

    $('.box').css('transform', 'translate3d(' + offsetX + 'px, ' + offsetY + 'px, 0)');
  });
});