Check If Element Is In View And Apply CSS Class - jQuery scrollStuff

scrollStuff is a small and easy jQuery plugin that applies your own CSS classes to elements whenever they will be visible in the screen.

Ideal for creating awesome CSS3 based reveal animations on elements when scrolling down or up the page.

How to use it:

1. Download and insert the JavaScript file scrollstuff.js after jQuery but before the </body> tag.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="scrollstuff.js"></script>

2. Attach the function to the target element and specify the CSS class(es) to be applied. In this example, we use the popular animate.css to animate the element when scrolled into view.

<div class="box">
  Element To Animate On Scroll
</div>

$(function(){
  $('.box').scrollstuff({
    classname: 'animated'
  });
});

3. Customize the time to wait before applying the CSS class to the element when scrolled into view. Default: 0.

$(function(){
  $('.box').scrollstuff({
    classname: 'animated',
    delay: 1000
  });
});

4. Determine whether to repeat the animation. Default: false.

$(function(){
  $('.box').scrollstuff({
    classname: 'animated',
    delay: 1000,
    repeat: true
  });
});

---

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