kansatsu

A wrapper of Intersection Observer API.

Kansatsu is a Japanese word 観察 (かんさつ) in Rōmaji, which means observe.

Getting started

You may need a library polyfills the native IntersectionObserver API in unsupporting browsers. w3c IntersectionObserver polyfill

Install

This project uses node and npm. Go check them out if you don't have them locally installed.

$ npm install --save kansatsu

or if you use yarn.

$ yarn add kansatsu

Then with a module bundler like rollup or webpack, use as you would anything else:

// using ES6 modules
import Kansatsu from 'kansatsu'

// using CommonJS modules
var Kansatsu = require('kansatsu')

The UMD build is also available on unpkg:

<script src="//unpkg.com/kansatsu/dist/kansatsu.umd.js"></script>

This exposes the Kansatsu() function as a global.

Usage

<div class="man"></div>
<div class="man"></div>
<div class="man"></div>

import Kansatsu from 'kansatsu';

const man = document.querySelectorAll('.man')
let kansatsu = Kansatsu({
  offset: 100,
  callback (el, isAppear, unwatch) {
    if (isAppear) {
      el.classList.add('is-appear')
      unwatch()
    }
  }
})
Array.from(man).forEach(el => kansatsu.watch(el))

Examples & Demos

Real Example on JSFiddle ➡️

API

Kansatsu's API is organized as follows:

Kansatsu(options: Object)

Kansatsu will account for the following properties in options:

• root for root pass to the IntersectionObserver() API. Default null.

• appear for threshold pass to the IntersectionObserver() API. Default 0.

• offset the percent used by rootMargin. Default 0.

    // offset 20
    // rootMargin = '20% 0px'

• rootMargin for rootMargin pass to the IntersectionObserver() API. Default '0%'.

• callback the callback fot the observe action.

    callback (el, isAppear, unwatch) {
      if (isAppear) {
        el.classList.add('is-appear')
        unwatch()
      }
    }

watch()

The wrap for observe