jQuery Plugin To Animate Content As User Scrolls - scrollex

File Size: 16.8 KB
Views Total: 9003
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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.


// 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() {

// Enter event: Remove the 'inactive' class from this element.
enter: function() {

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


3. All the default settings.


// 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:


  • 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.