Asynchronous boundary detection, without dependencies.
See documentation.Basic Detection
const box = document.querySelector('.box')
const circle = document.querySelector('.circle')
const onEnter = () => { // change color }
const onLeave = () => { // reset color }
const boundary = Bound({
root: box,
threshold: 1.0
})
boundary.watch(circle, onEnter, onLeave)
Lazy-Loading Images
Image source set.
Image source set.
Image source set.
const images = document.querySelectorAll('img')
const onEnter = () => { // load image }
const boundary = Bound({
margins: {bottom: 100}
})
images.forEach(image => {
boundary.watch(image, onEnter)
})