Easy Multilayer Parallax Scrolling Plugin With jQuery - lulu-parallax

Just another jQuery plugin for the familiar parallax scrolling effect which allows to be applied to multiple layered elements with optional speed and direction. Responsive and mobile compatible.

How to use it:

1. Include jQuery JavaScript library and the jQuery lulu-parallax plugin's files on the webpage.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/lulu-parallax.js"></script>
<link href="css/lulu-parallax.css" rel="stylesheet">

2. Create a group of elements you wish to apply the parallax scrolling effect and use CSS classes 'against' and 'with' to control the direction.  Use the background class when you want something to move in and out of the group window. Animation speed could be controlled via data-rate attribute as follows:

<div class="parallax-group">
  <div class="parallax-container background against" data-rate=".25"></div>
  <div class="parallax-container foreground against" data-rate=".75">Content</div>
  <div class="parallax-container foreground with" data-rate=".5">Content</div>
</div>

3. Active the parallax effect on vertical page scrolling.

luluParallax();

4. You will want to give each group container a height value in your own CSS.

.parallax-group {
  height: 50vw;
  float: left;
  margin: 20px 0 40px 0;
}

.parallax-group .parallax-container.background {
  height: 100vw;
  display: table;
}

---

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