Easy Parallax Scrolling Effect with jQuery - Parallaxor

Parallaxor is a lightweight jQuery plugin to create the familiar parallax scrolling effect for fix positioned elements inside a position: relative container.

Basic Usage:

1. Load jQuery library and the jQuery parallaxor plugin's script in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.parallaxor.js"></script>

2. Insert a fix positioned element and a parallax image into your document.

<div id="header">
  <h1>jQuery Parallaxor</h1>
  <img src="parallax.jpg">
</div>

3. The CSS to make the h1 element fix positioned.

#header h1 {
  position: absolute;
  left:50%;
  top:50%;
  z-index: 2;
...
}

4. Call the plugin on the parent element.

$('#header').parallaxor({

  // Represents the distance from the top of the browser
  // after which the layers start moving.
  top: 0,

  // Object holding all the layers that 
  // you want to move inside the container.
  layers: {
    'img': {

      // how much the layer should move inside the container 
      // when the container is into the browser's view range.
      distance: '50%',

      // up, down, left, right.
      direction   : 'down'
    }
  }

});

5. The plugin will automatically generate a 'parallaxor-container' wrapper for your parallax elements. Add the following CSS snippet into your CSS file.

.parallaxor-container {
  position: relative;
  overflow: hidden;
}

Change log:

2015-03-01

• add cache support

---

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