jQuery Plugin For Interactive Multi-layer Parallax Effect - Parallaxmouse

jQuery Plugin For Interactive Multi-layer Parallax Effect - Parallaxmouse
File Size: 179 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

See also:

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.