Install
npm install innerer --save
Usage
import { createInners } from "innerer";
// in your code
// to start monitoring your innerer elements
createInners(callback, "#element-id");
// You need to destroy the listeners before leaving the document
destroyInners();
or
import Innerer from "innerer";
// in your code
Innerer.create(callback, "#element-id");
// You need to destroy the listeners before leaving the document
Innerer.destroy();
In your HTML / Template
<div data-innerer="tagName"></div>
Parameters
callbak is invoked when document is scrolling or resizing with one argument as an object with the information of every inner-tag
.
First Argument (type: Object)
List of properties, types and definition
tag property
tag: {
type: String,
definition: Tag name defined on the data-innerer attribute, ex. <div data-innerer="tag-name"></div>
}
direction property
direction: {
type:String,
definition: document scroll direction, available options: ["up", "down"]
}
position property
position: {
status: {
type: String,
definition: Available options ["bottom-outer", "entered", "top-outer"]
},
percentageInTransition: {
type: Number
definition: 0 means element is outside the viewport, 1 means element is inside the viewport, between 0 and 1 means element is entering or leaving the viewport [from bottom to top, or from top to bottom].
},
percentageInPosition: {
type: Number,
definition: 0 means top element is in the top of the viewport, 1 means top element is in the bottom of the viewport, 0.5 means top element is in the middle of the viewport.
},
percentageOutside: {
type: Number,
definition: 0 means top element is in the bottom or inside of the viewport, 1 means top element is one height element or greater away outside from the bottom or top of the viewport, between 0 an 1 means element top is one height element near the bottom or top of the viewport.
}
}
centered property
centered: {
status: {
type: String
definition: available option: ["below_center", "above_center"]
},
percentage: {
type: Number
definition: 1 means element center y in the center of the viewport, 0 means element center is in the top or bottom of the viewport.
}
}
clientRect property
clientRect: {
top: {
type: Number,
definition: same as getBoundingClientRect.top
},
right: {
type: Number,
definition: same as getBoundingClientRect.right
},
bottom: {
type: Number,
definition: same as getBoundingClientRect.bottom
},
left: {
type: Number,
definition: same as getBoundingClientRect.left
},
width: {
type: Number,
definition: same as getBoundingClientRect.width
},
height: {
type: Number,
definition: same as getBoundingClientRect.height
}
}
[querySelector](optional) A query selector where the innerer will start searching for data-innerer
attributes, if not present it will start searching for data-innerer
attributes in the whole document.
Use constant values
You can import and use the constant values to make work your conditions for each Innerer
export const DIRECTION_UP = 'up';
export const DIRECTION_DW = 'down';
export const ENTERED = 'entered';
export const TOP_OUTER = 'top-outer';
export const BOTTOM_OUTER = 'bottom-outer';
export const BELOW_CENTER = 'below_center';
export const ABOVE_CENTER = 'above_center';
In your code
import {
DIRECTION_DW,
DIRECTION_UP,
ENTERED,
BOTTOM_OUTER,
BELOW_CENTER,
ABOVE_CENTER
} from "innerer";
Live Example
Author
Jose Burgos jose@bqroster.com