op-inview

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

Install

npm install op-inview

yarn add op-inview

Usage

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 |

Enable inline

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>