Lightweight Momentum Scrolling And Parallax Plugin With jQuery - parachutejs

parachutejs is a lightweight jQuery plugin for adding momentum scrolling together with parallax effect to web content that works perfectly on both desktop and mobile browsers.

How to use it:

1. Load the latest version of jQuery and the jQuery parachutejs plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="dist/parachute.js"></script>

2. Add the momentum scrolling effect to specific containers.

Parachute.page({
  scrollContainer: '#scrollContainer',
  heightContainer: '#fakeScrollContainer'
});

3. Add the parallax scrolling effect to specific element(s).

Parachute.parallax({
  element: '.parallax-1',
  pxToMove: -400
});

// or
Parachute.sequence({
  element: ['.parallax-1', '.parallax-2'],
  callback: function(active) {
    // do something
  }
});

4. Initialize the parachutejs and we're done.

Parachute.init();

Change log:

2016-08-12

• updates to scolling functions

2016-07-27

• updated in-view calculations

2016-07-15

• typos/fixes/cleanup

---

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