https://github.com/fireyy/kansatsu
A wrapper of Intersection Observer API.
https://github.com/fireyy/kansatsu
Last synced: 7 months ago
JSON representation
A wrapper of Intersection Observer API.
- Host: GitHub
- URL: https://github.com/fireyy/kansatsu
- Owner: fireyy
- Created: 2017-12-07T07:09:25.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-12T01:45:12.000Z (over 8 years ago)
- Last Synced: 2025-10-02T11:47:57.521Z (10 months ago)
- Language: JavaScript
- Size: 53.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# kansatsu
> A wrapper of Intersection Observer API.
Kansatsu is a Japanese word [観察 (かんさつ)](https://en.wiktionary.org/wiki/観察) in Rōmaji, which means observe.
## Getting started
You may need a library polyfills the native IntersectionObserver API in unsupporting browsers. [w3c IntersectionObserver polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill)
## Install
This project uses [node](http://nodejs.org) and [npm](https://npmjs.com). Go check them out if you don't have them locally installed.
```sh
$ npm install --save kansatsu
```
or if you use [yarn](https://yarnpkg.com).
```sh
$ yarn add kansatsu
```
Then with a module bundler like [rollup](http://rollupjs.org/) or [webpack](https://webpack.js.org/), use as you would anything else:
```javascript
// using ES6 modules
import Kansatsu from 'kansatsu'
// using CommonJS modules
var Kansatsu = require('kansatsu')
```
The [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com):
```html
```
This exposes the `Kansatsu()` function as a global.
* * *
## Usage
```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))
```
## Examples & Demos
[**Real Example on JSFiddle**](https://jsfiddle.net/fireyy/g1740zm7/) ➡️
## 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()`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API. Default null.
* `appear` for `threshold` pass to the [`IntersectionObserver()`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API. Default 0.
* `offset` the percent used by `rootMargin`. Default 0.
```js
// offset 20
// rootMargin = '20% 0px'
```
* `rootMargin` for `rootMargin` pass to the [`IntersectionObserver()`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API. Default '0%'.
* `callback` the callback fot the `observe` action.
```js
callback (el, isAppear, unwatch) {
if (isAppear) {
el.classList.add('is-appear')
unwatch()
}
}
```
### `watch()`
The wrap for `observe`