Minimalist 3D Parallax Effect with jQuery and CSS3

An interactive background parallax effect that uses jQuery and CSS3 transform & translate3d to move a set of DIV layers at different speeds (offsets) on mouse over.

See also:

• jQuery Plugin To Add Interative Parallax Effects To Objects - Piao
• Smooth Parallax Effects with jQuery and CSS3 - woolParalax
• Interactive Mouse Hover Parallax Effect with jQuery - Mouse Parallax
• Simple and Lightweight jQuery Parallax Engine - Parallax.js
• Creating 3D Interative Parallax Background Effects with jQuery - Simples 3D
• Interactive Parallax Effect with jQuery - jparallax

How to use it:

1. Create a set of layers for the background parallax effect. Use data-offset attribute to set the specific movement speed for each layer.

<div class="scene">
  <div data-offset="90" class="clouds parallax"></div>
  <div data-offset="30" class="trees parallax"></div>
  <div data-offset="20" class="grass parallax"></div>
  <div data-offset="50" class="buildings parallax"></div>
  <div class="ground"></div>
</div>

2. Add background images to the layers in your CSS.

.scene {
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
  right: 0;
  border-bottom: 100px solid #342a2a;
  height: 800px;
}

.scene > div {
  position: absolute;
  bottom: 0;
}

.ground {
  width: 100%;
  height: 30px;
  background: #1d1818;
  z-index: 999;
}

.scene > div.clouds {
  width: 895px;
  left: 50%;
  margin-left: -447px;
  height: 255px;
  bottom: 250px;
  background: url(http://i.imgur.com/WYfbo0O.png) no-repeat center;
}

.scene div.trees {
  width: 908px;
  height: 174px;
  background: url(http://i.imgur.com/4JOfJhg.png) no-repeat center;
  z-index: 100;
  left: 50%;
  bottom: 20px;
  margin-left: -454px;
}

.scene div.grass {
  width: 964px;
  height: 37px;
  z-index: 200;
  left: 50%;
  bottom: 20px;
  margin-left: -482px;
  background: url(http://i.imgur.com/h0aXbZr.png) no-repeat center;
}

.buildings {
  width: 763px;
  height: 303px;
  left: 50%;
  margin-left: -400px;
  background: url(http://i.imgur.com/5LmAigM.png) no-repeat center;
}

3. Include the latest version of JQuery javascript library at the end of the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

4. A little Javascript to active the background parallax effect on mouse over and move.

$(window).on('mousemove', function(e) {
  var w = $(window).width();
  var h = $(window).height();
  var offsetX = 0.5 - e.pageX / w;
  var offsetY = 0.5 - e.pageY / h;

  $(".parallax").each(function(i, el) {
    var offset = parseInt($(el).data('offset'));
    var translate = "translate3d(" + Math.round(offsetX * offset) + "px," + Math.round(offsetY * offset) + "px, 0px)";

    $(el).css({
    '-webkit-transform': translate,
    'transform': translate,
    'moz-transform': translate
    });
  });
});

---

This awesome jQuery plugin is developed by balajmarius. For more Advanced Usages, please check the demo page or visit the official website.