jQuery Plugin To Activate/Deactivate Elements On Scroll - scrollTrigger.js

File Size: 3.4 KB
Views Total: 2406
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Activate/Deactivate Elements On Scroll - scrollTrigger.js

scrollTrigger.js is a lightweight jQuery plugin that detects when elements become visible in viewport so you can create scrolling effects on them by adding/removing CSS properties.

How to use it:

1. Include the jQuery scrollTrigger.js plugin after you have jQuery library loaded.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="scrollTrigger.js"></script>

2. Call the plugin on the elements.

$('div').scrollTrigger();

3. The plugin will add the CSS class 'active' name to your elements as they become visible in viewport. Create element scrolling effects in your CSS as follow:

div.active {
  ...
}

4. Available options.

$('div').scrollTrigger({

// Offset from top of element
offset: 60,

// Target another element to activate/deactivate
target: this

});

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