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>