🎤 criss-cross

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.

Install

npm install criss-cross --save-dev

Usage

import crissCross from 'criss-cross';

const $el = document.querySelector('.el');
const watcher = crissCross.create($el);

watcher.fullyEnterViewport(item => {
  item.$el.classList.add('is-animated');
});

<script src="https://unpkg.com/criss-cross"></script>
<script>
const $el = document.querySelector('.el');
const watcher = crissCross.create($el);

watcher.lock();
watcher.on('exitViewport', item => {
  if (item.isBeforeViewport) {
    item.$el.classList.add('is-sticky');
  }
});
</script>

Examples

Coming soon…

API

create(target, [options])

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: 0

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: 0

bottom

Type: Number Default: 0

for now, only the Y axis is supported…

root

Type: null HTMLElement Default: null

Refers to root property. If the root is null, then the bounds of the actual document viewport are used. Other values (HTMLElement) should be parent of target.

destroy()

Kills everything…

update(watchItem, [options, force])

target

Type: Item

The watchItem you want to update the observer.

options

Type: Object

Same as create() options parameter…

force

Type: Boolean Default: false

Force was… properties to be resetted to undefined

watchItem

Returned by crissCross.create().

Methods

• init
• destroy
• pause
• resume
• lock*
• 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.

Events

Event callbacks receive a watchItem as parameter.

"Aliases":

• enterViewport
• fullyEnterViewport
• exitViewport
• fullyExitViewport

"Binders":

• on
• off
• one

Properties

• isInViewport
• isFullyInViewport
• isBeforeViewport
• isAfterViewport
• wasInViewport
• wasFullyInViewport
• wasBeforeViewport
• wasAfterViewport

Extra

• $el: watched element
• observer: IntersectionObserver instance
• manager: CrissCross instance

License

UNLICENSE