An esay-to-use wrapper class over intersection observer API.
You can find a simple demo here.
You just have to import Intersectr.min.js
class into your HTML page (you can find it on the dist
folder of this repository) :
<script type="text/javascript" src="/path/to/Intersectr.min.js" defer></script>
Intersectr is compatible with IE11+ (it includes a polyfill of intersection-observer API) and is supported by all modern browsers.
And you can use Intersectr class like so :
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 ? :)
Intersectr comes with a very simple API.
Unobserves the HTML element defined by the target
parameter, and triggers the callback when its visible (depends on the global threshold ratio(s)).
Intersectr.observe(
target: Element|String,
callback: Function(entry: IntersectionObserverEntry)
): Intersectr
Example :
intersectr.observe('.my-item', entry => {
if (entry.isIntersecting) {
entry.target.classList.add('intersected')
entry.unobserve(true)
}
})
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).
Intersectr.unobserve(
target: Element|String,
soft: Boolean = true
): Intersectr
Example :
intersectr.unobserve('.my-item', true)
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)).
Intersectr.intersect(
target: Element|String,
callback: Function(intersecting: Boolean, entry: IntersectionObserverEntry)
): Intersectr
Example :
intersectr.intersect('.my-item', (intersecting, entry) => {
if (intersecting) {
entry.target.classList.add('intersected')
entry.unobserve(true)
}
})
Intersecting from an intersection ratio.
Intersectr.intersectFrom(
target: Element|String,
ratio: Number,
callback: Function(intersecting: Boolean, entry: IntersectionObserverEntry)
): Intersectr
Example :
intersectr.intersectFrom('.my-item', .3, (intersecting, entry) => {
if (intersecting) {
entry.target.classList.add('intersected')
entry.unobserve(true)
}
})
Intersecting until an intersection ratio.
Intersectr.intersectUntil(
target: Element|String,
ratio: Number,
callback: Function(intersecting: Boolean, entry: IntersectionObserverEntry)
): Intersectr
Example :
intersectr.intersectUntil('.my-item', .8, (intersecting, entry) => {
if (intersecting) {
entry.target.classList.add('intersected')
entry.unobserve(true)
}
})
Intersecting between intersection ratios.
Intersectr.intersectBetween(
target: Element|String,
ratios: Number[],
callback: Function(intersecting: Boolean, entry: IntersectionObserverEntry)
): Intersectr
Example :
intersectr.intersectBetween('.my-item', [.3, .8], (intersecting, entry) => {
if (intersecting) {
entry.target.classList.add('intersected')
entry.unobserve(true)
}
})
Refresh all observers. Useful to observe again 'soft' unobserved entries.
Intersectr.refresh(): Intersectr
Example :
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
Intersectr.destroy(): void