Simple jQuery Plugin To Animate Html Elements On Scroll - jScrollability

jScrollability is a simple, lightweight, mobile compatible jQuery plugin to animate Html elements on view while scrolling.

See also:

• Awesome jQuery Plugin For Magical Scroll Interactions - ScrollMagic

Basic Usage:

1. Load the jQuery jScrollability plugin after you have jQuery library loaded.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jScrollability.js"></script>

2. Slide in an element from right to left.

(function($) {
$(document).ready(function() {
  $.jScrollability([{
    'selector': '.demo-element',
    'start': 'parent', // start point
    'end': 'parent', // end point
    'fn': { // functions
      'left': {
      'start': 100,
      'end': 0,
      'unit': '%'
     }
    }
  }]);
});
})(jQuery);

3. Reveal an element from bottom as it becomes visible on view.

(function($) {
$(document).ready(function() {
  $.jScrollability([{
    'selector': '.demo-element',
    'start': 'parent', // start point
    'end': 'parent', // end point
    'fn': {
      'top': {
      'start': 100,
      'end': 15,
      'unit': '%'
      }
    }
  }]);
});
})(jQuery);

4. Check out the readme.md in the zip for more usages.

Change logs:

2016-12-06

• added class-based events

2015-12-17

• Updated to triggered-animation support

2015-03-02

• bugfixes

2014-12-09

• Added dom element looping for bulk configuration

---

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