izitin

check if elements are in viewport

Install

With Bower

bower install izitin

With NPM

npm install izitin

Example Setup

Javascript

import Izitin from 'izitin';

// create an instance with default options
const izitin = new Izitin({
  fraction: 0, // fraction of the item that must be in viewport (0 - 1)
  fn: e => {}, // callback function for each individual item
  container: document, // the selector or dom element for the container
  items: '.izitin', // the selector for the items
  stagger: 100, // duration for stagger (in ms)
  css: true, // use css transition-delay for staggering
  remove: false, // remove class when out of viewport
  throttle: 0 // throttle the event listener (in ms)
  detectUp: true // reverse item order if scrolled up
});

The callback function fn receives an object with the following content:

{
  index: // the index of the items
  direction: // the scroll direction
  target: // the DOM element
  izitin: // boolean, true if in viewport
  position: // where in relation to the viewport is the element
  rect: // the bounding client rect of the DOM element
}

You can also trigger a check manually, might be useful for ajax websites:

izitin.check();

Or you can reset the classes on all items:

izitin.reset();

If you don't need it anymore, you can dispose of it properly:

izitin.destroy();
delete izitin;

CSS

Izitin adds the following classes to items:

.itizin {} /* the item is in the viewport */
.izitin-above {} /* the item is above the viewport */
.izitin-below {} /* the item is below the viewport */
.izitin-left {} /* the item is left of the viewport */
.izitin-right {} /* the item is right of the viewport */

HTML

You can add custom values for staggering individual elements:

<div class="izitin" data-izitin-stagger="200"></div>

License

MIT License