kansatsu

1.1.1 • Public • Published

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

Package Sidebar

Install

npm i kansatsu

Weekly Downloads

0

Version

1.1.1

License

none

Last publish

Collaborators

  • fireyy