A Plugin For jQuery To Create A Parallax Page With A Cool Effect

How to make use of it:

1. Load the required JavaScript and CSS information within the doc.

<link href="/path/to/jquery.parallax.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.parallax.js"></script>

2. Add a background picture to your parallax container utilizing the data-bg attribute:

<div data-bg="bg.jpg">
  ...
</div>

3. Customize the speed fee.

<div data-bg="bg.jpg" 
     data-rate="0.5">
     ...
</div>

4. Apply a scroll-triggered reveal animation to child parts utilizing the data-effect attributes.

<div data-bg="bg.jpg" 
     data-rate="0.5"
     data-effect="flip-x">
     <div class="list_item">
       ...
     </div>
     <div class="list_item">
       ...
     </div>
     <div class="list_item">
       ...
     </div>
</div>

5. Initialize the plugin and finished.

$('body').parallax();

6. Apply a customized reveal animation to your parts.

<div data-bg="bg.jpg" 
     data-rate="0.5"
     data-func="custom_show">
     ...
</div>

6. Apply a customized reveal animation to your parts.

function custom_show(obj, mode) {
  obj.children().addClass('animation animation_'+mode);
}

Parallax Scrolling Effects & Scroll Animations, jquery parallax Plugin/Github

See Demo And Download