0.6.1 • Published 7 years ago
izitin v0.6.1
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>