https://github.com/betaweb/intersectr
An easy-to-use wrapper class over intersection observer API.
https://github.com/betaweb/intersectr
api browser class easy easy-to-use intersection intersection-observer javascript observer observer-pattern wrapper
Last synced: about 4 hours ago
JSON representation
An easy-to-use wrapper class over intersection observer API.
- Host: GitHub
- URL: https://github.com/betaweb/intersectr
- Owner: betaWeb
- License: mit
- Created: 2020-05-26T09:54:20.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T11:57:09.000Z (over 2 years ago)
- Last Synced: 2025-06-17T13:18:13.141Z (8 months ago)
- Topics: api, browser, class, easy, easy-to-use, intersection, intersection-observer, javascript, observer, observer-pattern, wrapper
- Language: JavaScript
- Homepage:
- Size: 730 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# intersectr
An esay-to-use wrapper class over intersection observer API.
You can find a simple demo [here](https://codepen.io/betaweb/pen/eYpaLLB).
## Getting started
### Installation
You just have to import `Intersectr.min.js` class into your HTML page (you can find it on the `dist` folder of this repository) :
```html
```
> Intersectr is compatible with IE11+ (it includes a polyfill of intersection-observer API) and is supported by all modern browsers.
### Basic usage
And you can use Intersectr class like so :
```javascript
document.addEventListener('DOMContentLoaded', _ => {
const intersectr = new Intersectr()
intersectr.intersect('.my-item', (intersecting, entry) => {
if (intersecting) {
entry.target.classList.add('intersected')
entry.unobserve(true)
}
})
})
```
And.. That's it ! Easy, isn't it ? :)
### API
Intersectr comes with a very simple API.
#### observe
Unobserves the HTML element defined by the `target` parameter, and triggers the callback when its visible (depends on the global threshold ratio(s)).
```typescript
Intersectr.observe(
target: Element|String,
callback: Function(entry: IntersectionObserverEntry)
): Intersectr
```
*Example :*
```javascript
intersectr.observe('.my-item', entry => {
if (entry.isIntersecting) {
entry.target.classList.add('intersected')
entry.unobserve(true)
}
})
```
#### unobserve
Unobserves the HTML element defined by the `target` parameter. It deletes observables callbacks if `soft` parameter is false, does nothing otehrwise (useful with the `refresh()` method).
```typescript
Intersectr.unobserve(
target: Element|String,
soft: Boolean = true
): Intersectr
```
*Example :*
```javascript
intersectr.unobserve('.my-item', true)
```
#### intersect
Observes the HTML element defined by the `target` parameter, and triggers the callback when its visible.
The main difference with the `observe()` method is that the callback function will expose `intersecting` parameter which is true if teh element is intersecting, false otherwise (depends on the global threshold ratio(s)).
```typescript
Intersectr.intersect(
target: Element|String,
callback: Function(intersecting: Boolean, entry: IntersectionObserverEntry)
): Intersectr
```
*Example :*
```javascript
intersectr.intersect('.my-item', (intersecting, entry) => {
if (intersecting) {
entry.target.classList.add('intersected')
entry.unobserve(true)
}
})
```
#### intersectFrom
Intersecting from an intersection ratio.
```typescript
Intersectr.intersectFrom(
target: Element|String,
ratio: Number,
callback: Function(intersecting: Boolean, entry: IntersectionObserverEntry)
): Intersectr
```
*Example :*
```javascript
intersectr.intersectFrom('.my-item', .3, (intersecting, entry) => {
if (intersecting) {
entry.target.classList.add('intersected')
entry.unobserve(true)
}
})
```
#### intersectUntil
Intersecting until an intersection ratio.
```typescript
Intersectr.intersectUntil(
target: Element|String,
ratio: Number,
callback: Function(intersecting: Boolean, entry: IntersectionObserverEntry)
): Intersectr
```
*Example :*
```javascript
intersectr.intersectUntil('.my-item', .8, (intersecting, entry) => {
if (intersecting) {
entry.target.classList.add('intersected')
entry.unobserve(true)
}
})
```
#### intersectBetween
Intersecting between intersection ratios.
```typescript
Intersectr.intersectBetween(
target: Element|String,
ratios: Number[],
callback: Function(intersecting: Boolean, entry: IntersectionObserverEntry)
): Intersectr
```
*Example :*
```javascript
intersectr.intersectBetween('.my-item', [.3, .8], (intersecting, entry) => {
if (intersecting) {
entry.target.classList.add('intersected')
entry.unobserve(true)
}
})
```
#### refresh
Refresh all observers. Useful to observe again 'soft' unobserved entries.
```typescript
Intersectr.refresh(): Intersectr
```
*Example :*
```javascript
intersectr.intersectBetween('.my-item', [.3, .8], (intersecting, entry) => {
if (intersecting) {
entry.target.classList.add('intersected')
entry.unobserve(true) // soft unobserve
}
})
// ...
intersectr.refresh() // will observe again the 'soft' unobserved entry above
```
#### destroy
```typescript
Intersectr.destroy(): void
```