25 lines
673 B
TypeScript
25 lines
673 B
TypeScript
import { onMounted, onBeforeUnmount } from 'vue'
|
|
|
|
/**
|
|
* Adds the `visible` class to any `.reveal` element once it scrolls into view.
|
|
*/
|
|
export function useReveal() {
|
|
let observer: IntersectionObserver | null = null
|
|
|
|
onMounted(() => {
|
|
if (typeof IntersectionObserver === 'undefined') return
|
|
observer = new IntersectionObserver(
|
|
(entries) => {
|
|
for (const entry of entries) {
|
|
if (entry.isIntersecting) entry.target.classList.add('visible')
|
|
}
|
|
},
|
|
{ threshold: 0.12 },
|
|
)
|
|
document.querySelectorAll('.reveal').forEach((el) => observer?.observe(el))
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
observer?.disconnect()
|
|
})
|
|
}
|