Minimalist Is In View Detect Plugin - jQuery inViewport.js

inViewport.js is an ultra-small (only 10 lines of code) jQuery is in view checker that detects and triggers a function when a specified element is about to or has been scrolled to the viewport.

How to use it:

1. Load the main JavaScript jquery.inviewport.js after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.inviewport.js"></script>

2. Detect if part of your element is scrolled into view and do something by adding & removing CSS classes from the element as you scroll down or up the webpage.

$(window).on('resize scroll', function() {
  $('.your-element').each(function() {
    if($(this).inViewport('-150')) {  
      $(this).addClass('customClass');
    } else {
      $(this).removeClass('customClass');
    }
  });
});

3. Use this plugin to animate elements using CSS animations.

.inview {
  /*
    CSS Animations Here
  */
}

---

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