Multifunctional Scroll Detection Plugin For jQuery - scroll-detection.js

This is a robust jQuery scroll detection plugin which tracks how far users are scrolling and adds CSS animation classes to desired elements when they enter into view.

How to use it:

1. To get started, just include the scroll-detection.js after jQuery library and the Scroll Detection Plugin is ready for use.

<script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
<script src="scroll-detection.js"></script>

2. Enable the scroll-triggered animations on your elements using the following HTML data attributes.

• data-scrollin: Required
• data-scroll-offset: offset in pixels
• data-reset: re-animates the element on scroll down and up
• data-reverse: animates elements on scroll down and up 

<div class="demo-1" 
     data-scrollin 
     data-scroll-offset="300" >
     Offset
</div>

<div class="demo-2" 
     data-scrollin 
     data-scroll-offset="300" 
     data-reset>
     Resets
</div>

<div class="demo-3" 
     data-scrollin 
     data-scroll-offset="100" 
     data-reverse>
     Up and Down
</div>

<div class="demo-4" 
     data-scrollin>
     Runs Once
</div>

3. Apply custom CSS based animations to the elements when they come into view.

.element.element-out { 
  /*
    CSS/CSS3 properties here
  */
}

.element-three.element-in {
  /*
    CSS/CSS3 properties here
  */
 }

4. For debugging, you can careate an 'info' element on the webpage so you will see how far you are from the top

<div class="info">0</div>

Change log:

2018-02-18

• Fixing in-view item on load, and improving scroll performance

---

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