jQuery Plugin To Animate Content As User Scrolls - scrollex

scrollex is a jQuery plugin that detects scroll events (e.g. enter, exit, scroll through) and triggers a function based on the scroll position. So you can add fancy effects to any DOM elements on window scrolling to enhance your one page scrolling website.

See also:

• Awesome jQuery Plugin For Magical Scroll Interactions - ScrollMagic
• jQuery Plugin To Animate Elements When They Scroll Into View - inview
• Simple jQuery Plugin To Animate Html Elements On Scroll - jScrollability

Basic Usage:

1. Import jQuery library and the jQuery scrollex plugin into your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery.scrollex.js"></script>

2. Call the plugin and set the functions to be fired based on the scroll position.

$('.item').scrollex({

// Mode: Sets Scrollex to 'middle' mode (= midpoint between top/bottom edges must fall within contact area).
mode: 'middle',

// Initialize event: Add the 'inactive' class to this element as soon as Scrollex is initialized.
initialize: function() {
$(this).addClass('inactive');
},

// Enter event: Remove the 'inactive' class from this element.
enter: function() {
$(this).removeClass('inactive');
},

// Leave event: Apply the 'inactive' class to this element.
leave: function() {
$(this).addClass('inactive');
}

});

3. All the default settings.

$('.item').scrollex({

// Top.
top: 0,

// Bottom.
bottom: 0,

// Delay.
delay: 0,

// Mode ('default', 'top', 'middle', 'bottom', 'top-only', 'bottom-only').
mode: 'default',

// Enter function.
enter: null,

// Leave function.
leave: null,

// Initialize function.
initialize: null,

// Terminate function.
terminate: null,

// Scroll function.
scroll: null

});

Change log:

2015-04-04

• v0.2.1

---

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