🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Viewport

Documentation

in-viewport-class

A plain javascript library (~1kb) that adds classes to elements in viewport. This Repository also includes a jQuery version.

Install

Plain Javascript:

<script src="dist/in-viewport-class.js"></script>

jQuery

include this script after the jQuery library:

<script src="dist/jquery.in-viewport-class.js"></script>

bower

bower install in-viewport-class

npm

npm install --save in-viewport-class

Use

add i-v class to every element you want to observed.

<div class="element i-v"></div>

Classes

  • in-viewport added when the element enter the viewport, removed when the element left the viewport
  • was-in-viewport added when the element left the viewport
  • in-viewport-once added when the element enter the viewport first, newer removed

Example

have a look at example-plain-javascript.html or example.html


You May Also Like