A simple and fast API to manage viewport and DOM elements intersections as you scroll
npm install criss-cross!stability-wip
A simple and fast API to manage viewport and DOM elements intersections as you scroll.
Inspired by scrollmonitor from @stutrek and Kriss Kross
> It uses Intersection Observer API, so make sure to add a polyfill.
``sh`
npm install criss-cross --save-dev
`js
import crissCross from 'criss-cross';
const $el = document.querySelector('.el');
const watcher = crissCross.create($el);
watcher.fullyEnterViewport(item => {
item.$el.classList.add('is-animated');
});
`
`html`
Coming soon…
---
Returns a watchItem (see below)
#### target
Type: HTMLElement string
The DOM element you are "listening to".
If a string is used, it should be a "documentQuerySelectorable" reference.
#### options
Type: Object
##### offset
Type: Number Object
Default:
Refers to rootMargin property.
A number value sets equal top/bottom margins, in pixels.
Positive margins are added to the viewport bounding box, negative are removed.
###### top
Type: Number
Default:
###### bottom
Type: Number
Default:
> for now, only the Y axis is supported…
##### root
Type: null HTMLElement
Default:
Refers to root property.
If the root is null, then the bounds of the actual document viewport are used.target
Other values (HTMLElement) should be parent of .
Kills everything…
#### target
Type: Item
The watchItem you want to update the observer.
#### options
Type: Object
Same as create() options parameter…
#### force
Type: Boolean
Default:
Force was… properties to be resetted to undefined
---
Returned by crissCross.create().
- init
-
-
-
- *unlock
- *
> (*) if a watchItem had to be "fixed" (like a sticky header or whatever), we need to "lock" its initial position.
> lock() creates a "ghost" element to keep control of the movements.
> Event callbacks receive a watchItem as parameter.
"Aliases":
- enterViewport
-
-
-
"Binders":
- on
-
-
- isInViewport
-
-
-
-
-
-
-
- $el: watched elementobserver
- : IntersectionObserver instancemanager`: CrissCross instance
-
---