Op-inview NPM | npm.io

op-inview

Trigger function / add class when element is in & out of the viewport.

npm install op-inview

yarn add op-inview

import OpInview from 'op-inview';

To create a new inview instance:

const config = {
    el: document.querySelector('.inview')
};

const inview = OpInview.create(config);

It accepts a config object.

Type	Name	Default Value	Description
Dom node	`el`	`undefined` (required)	Dom element to track
Float	`start`	`0.2`	Start position of inview trigger range, when scrolling the page down. Using opViewProgress to track elements progress in the viewport
Float	`end`	`0.8`	End position of inview trigger range, when scrolling the page down.
String	`classEnter`	`is-inview-enter`	Class to apply when inview node entered the `trigger range`. If set to `null`, class wont be triggered. Has a dublicate class applied with `-top` or `-bottom` modifier, depending on element appearance position.
String	`classExit`	`is-inview-exit`	Same as above, but triggered on exit of range.
Boolean	`deactivate`	`false`	If set to `true` will deactivate inview, when exited, thus allowing reenter. If set to `false`, will enter once, and remove itself
Function	`onEnterCallback`	`undefined`	Function to be called on enter. Receives an object `{ value, direction }`, where `value` is `progress.value` when function is called and `direction` = `top` or `bottom`, depending on element appearance position.
Function	`onExitCallback`	`undefined`	Same as above, but called on exit

Enables inline html quick add. For when you just want to use basic add / remove inview class functionality.

OpInview.inline();

Include in HTML. Use op-inview attribute, include JSON object with the config within. (No need to provide el)

<div op-inview='{"start": 0, "end": 1}'></div>

6 years ago

6 years ago