npm install kansatsu> A wrapper of Intersection Observer API.
Kansatsu is a Japanese word 観察 (かんさつ) in Rōmaji, which means observe.
You may need a library polyfills the native IntersectionObserver API in unsupporting browsers. w3c IntersectionObserver polyfill
This project uses node and npm. Go check them out if you don't have them locally installed.
``sh`
$ npm install --save kansatsu
or if you use yarn.
`sh`
$ yarn add kansatsu
Then with a module bundler like rollup or webpack, use as you would anything else:
`javascript
// using ES6 modules
import Kansatsu from 'kansatsu'
// using CommonJS modules
var Kansatsu = require('kansatsu')
`
The UMD build is also available on unpkg:
`html`
This exposes the Kansatsu() function as a global.
*
`html`
`js
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))
`
Kansatsu's API is organized as follows:
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.`
js`
// offset 20
// rootMargin = '20% 0px'
* for rootMargin pass to the IntersectionObserver() API. Default '0%'.callback
* the callback fot the observe action.
`js`
callback (el, isAppear, unwatch) {
if (isAppear) {
el.classList.add('is-appear')
unwatch()
}
}
The wrap for observe`