Nutty Peanut Marshmallow

    scrollzzz

    0.7.0 • Public • Published

    scrollzzz

    size-badge downloads-badge

    Lightweight, fast, zero-dependency package which use IntersectionObserver to observe when an element intersect a (trigger) boundary line inside the viewport.

    Why

    Make it easy to create scroll-driven interactions in the browser without performance overload.

    Key features

    You have access to:

    • Scroll direction
    • Element position relative to the trigger
    • Percent of completion relative to the target top border
    • The original IntersectionObserver entry

    You can also:

    • Unobserve targets
    • Change IntersectionObserver.root
    • Disconnect IntersectionObserver

    And more.

    Install

    NPM

    npm install --save scrollzzz

    CDN

    <script src="https://unpkg.com/scrollzzz/dist/scrollzzz.iife.min.js"></script>

    Quick start

    const observe_box = scrollzzz({
      targets: '.box',
      trigger: 0.5,
      debug: true
    });
     
    observe_box
      .init()
      .observe(({ direction, position, entry }) => { ... });

    Examples

    See online examples and inspect their index.html source code for more info.

    API

    Go to API page.

    How it works

    observe() works as callback handler of IntersectionObserver, it fires on page load for all elements, then it fires only when element enter or exit the trigger line.

    If progress===true and an element intersect the trigger, a scroll event listener is added to keep track of progress, when the element leave the trigger the event listener is removed. It make use of passive to improve performance.

    When you use unobserve option, scrollzzz will cache all targets that has been unobserved, if scrollzzz is re-initialize it'll not observe them again (see docs/unobserve example), you can also empty the cache if needed (read API for reference).

    Browsers support

    Tested in IE11 and in the latest version of Chrome, Firefox, Edge, Safari. For older browser make sure to add the official IntersectionObserver polyfill just before scrollzzz.

    Notes

    It works even if the browser is zoomed.

    Inspired by scrollama.

    Install

    npm i scrollzzz

    DownloadsWeekly Downloads

    4

    Version

    0.7.0

    License

    MIT

    Unpacked Size

    78.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • pldg