28 lines
853 B
JavaScript
28 lines
853 B
JavaScript
import { onBeforeUnmount, onMounted } from 'vue'
|
|
|
|
export function useScrollReveal(rootRef, selector = '.landing-reveal') {
|
|
let observer = null
|
|
|
|
onMounted(() => {
|
|
const elements = rootRef.value?.querySelectorAll(selector) ?? []
|
|
|
|
if (!('IntersectionObserver' in window)) {
|
|
elements.forEach((element) => element.classList.add('is-visible'))
|
|
return
|
|
}
|
|
|
|
observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('is-visible')
|
|
observer.unobserve(entry.target)
|
|
}
|
|
})
|
|
}, { threshold: 0.05 })
|
|
|
|
elements.forEach((element) => observer.observe(element))
|
|
})
|
|
|
|
onBeforeUnmount(() => observer?.disconnect())
|
|
}
|