jQuery Plugin For Interactive Multi-layer Parallax Effect - Parallaxmouse

Parallaxmouse is a very small jQuery plugin for creating an interactive parallax effect on multi-layer images that respond to mouse movement.

See also:

• jQuery Plugin To Add Interative Parallax Effects To Objects - Piao
• Mouse-aware Parallax Effect with jQuery and TweenMax - Mouse Parallax
• Minimalist 3D Parallax Effect with jQuery and CSS3
• 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
• jQuery Plugin To Create Interactive Parallax Effects - Real Parallax

How to use it:

1. Add a group of parallax images to a container. If an image is positioned from a specified position in CSS make sure to add the position class.

<div id="wrapper">
  <img id="layer-1" class="parallax top" src="layer-1.png">
  <img id="layer-2" class="parallax top" src="layer-2.png">
  <img id="layer-3" class="parallax" src="layer-3.png">
  <img id="layer-4" class="parallax left top" src="layer-4.png">
  <img id="layer-5" class="parallax left" src="layer-5.png">
</div>

2. Set the CSS position: absolute property to these images.

.parallax {
  position: absolute;
}

3. Initialize the plugin and specify the movement rate for each image.

$(window).parallaxmouse({
  elms: [
      {el: $('#layer-1'), rate: 0.2},
      {el: $('#layer-2'), rate: 0.2},
      {el: $('#layer-3'), rate: 0.2},
      {el: $('#layer-4'), rate: 0.2},
      {el: $('#layer-5'), rate: 0.2},
  ]
});

4. More configuration options.

// specify the maximum distance an element can possibly travel in any direction
range: 100,

// an array of elements to be parallaxed
elms: [],

// specify the direction of movement relative to mouse movement
invert: false

---

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