jQuery Plugin For Simple Background Parallax Effect

Just another jQuery plugin to create a simple background parallax scrolling effect on a set of Html elements.

How to use it:

1. Include jQuery library and the jQuery simple parallax plugin in the web page.

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

2. Wrap your main content into a container.

<div class="wrapper">
  ...
</div>

3. Create the background parallax elements as follows.

<div class="background_align">
  <div class="background">
    <div class="px top" data-offset="2"> <img src="images/block_top1.png"> </div>
    <div class="px mid" data-offset="15"> <img src="images/block_mid1.png"> </div>
    <div class="px bottom" data-dir="up" data-offset="5"> <img src="images/block_bottom1.png"> </div>
  </div>
</div>

4. The required CSS styles.

.background_align {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -100;
}

.background {
  position: relative;
  width: 1440px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.px {
  position: absolute;
  width: 100%;
}

.top { top: -50%; }

.mid { top: 0%; }

.bottom { top: 50%; }

5. Initialize the plugin by calling:

(function(){
  $('.px').parallax({
    offset: 10,
    scrollEl: $('.wrapper')
  });
})();

---

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