jQuery & Html5 Based Background Parallax Scrolling Effect

A minimal jQuery plugin used to implement familiar background image Parallax scrolling effect with minimal effort. Based on jQuery, modernizr.js, CSS position properties and Html5 data-* attributes.

How to use it:

1. Include the jQuery JavaScript library together with modernizr.js and parallax.js in your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="modernizr.js"></script>
<script src="parallax.js"></script>

2. Create a parallax scrolling area with a background image as follows, and set the parallax behaviors using data-* attributes.

<div data-type="parallax" data-prlx-parent="true">

  <div class="parallax-background">
   <img class="image" src="background.jpg" data-prlx-type="sprite" data-size="fullsize" data-prlx-speed="0.3">
  </div>
  
  <div class="content" data-prlx-type="sprite" data-prlx-speed="0.6">
    <h1>Here's content</h1>
  </div>
  
</div>

3. Add the required parallax styling into your CSS file.

[data-type=parallax] {
  position: relative;
  z-index: 10;
}
[data-prlx-parent=true] {
  overflow: hidden;
  position: relative;
}
[data-prlx-type=sprite] {
  position: absolute;
}
.parallax-content {
  position: relative;
}

---

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