Newton's Preposterous Miscalculation

    criss-cross

    0.0.9 • Public • Published

    🎤 criss-cross

    stability-wip Npm Version Build Status Coverage Status

    A simple and fast API to manage viewport and DOM elements intersections as you scroll.
    Inspired by scrollmonitor from @stutrek and Kriss Kross

    Jump! Jump

    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

    Install

    npm i criss-cross

    DownloadsWeekly Downloads

    18

    Version

    0.0.9

    License

    SEE LICENSE IN UNLICENSE

    Last publish

    Collaborators

    • thierrymichel