Interactive Parallax Effect with jQuery - jparallax

jparallax is a jQuery Plugin that enables you to create Interactive Parallax Effects for your projects.

jParallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions these layers move at different rates, in a parallaxy kind of way.

The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport.

When the mouse is moved to the extreme left-hand side of the mouseport the left-hand side of the layer meets the left-hand side of its viewport, and when the mouse is moved to the extreme right-hand side of the mouseport the right-hand side of the layer arrives at the right hand-side of its viewport.

How to use it:

1. To get started, insert the main JavaScript file jquery.parallax.js after loading the latest jQuery JavaScript library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.parallax.js"></script>

2. Add layers to the parallax container.

<div id="port">
  <img class="parallax-layer" src="parallax1.png" alt="" />
  <img class="parallax-layer" src="parallax2.png" alt="" />
  <img class="parallax-layer" src="parallax3.png" alt="" />
  ...
</div>

3. Activate the interactive parallax effect on these layers.

jQuery('.parallax-layer').parallax({
  mouseport: jQuery("#port")
});

4. All possible options to config the interactive parallax effect.

jQuery('.parallax-layer').parallax({

  // jQuery object or selector of DOM node to use as mouseport
  mouseport: 'body',  

  // boolean | 0-1 | 'npx' | 'n%'
  xparallax: true,    
  yparallax: true,

  // 0-1 - Sets default alignment. Only has effect when parallax values are something other than 1 (or true, or '100%')
  xorigin: 0.5,     
  yorigin: 0.5,

  // 0-1 (0 instant, 1 forever) - Sets rate of decay curve for catching up with target mouse position
  decay: 0.66,    

  // Int (milliseconds)
  frameDuration: 30,      

  // String - Class added to layer when frozen
  freezeClass: 'freeze' 
  
});

Changelog:

2020-11-17

• Doc & Demo updated

---

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