Add CSS Classes To Elements As In Viewport - in-viewport-class

in-viewport-class is a jQuery viewport checker plugin which detects when elements enter the viewport and add corresponding classes for animations and more.

How to use it:

1. Insert the JavaScript jquery.in-viewport-class.js after jQuery JavaScript library and we're ready to go.

<script
        src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
<script src="dist/jquery.in-viewport-class.js"></script>

2. Add the CSS class to the target elements:

<div class="element i-v element-1"></div>
<div class="element i-v element-2"></div>
<div class="element i-v element-3"></div>
...

3. The plugin will add the CSS class 'in-viewport' to the element when it is in the viewport so you can animate with CSS.

.element.in-viewport {
  /*
    CSS Animation Rules Here
  /*
}

4. The plugin will add the CSS class 'was-in-viewport' to the element when it was in the viewport

.element.was-in-viewport {
  /*
    CSS Animation Rules Here
  /*
}

5. The plugin will add the CSS class 'in-viewport-once' to the element once it enters the viewport.

.element.in-viewport-once {
  /*
    CSS Animation Rules Here
  /*
}

6. All default options.

{
  'tellMeClass': 'i-v',
  'inViewClass': 'in-viewport',
  'onceInViewClass': 'in-viewport-once',
  'wasInViewClass': 'was-in-viewport'
}

Change log:

2017-10-08

• switch readyState from complete to interactive

2017-10-06

• remove log

---

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