34 lines
677 B
Vue
34 lines
677 B
Vue
<template>
|
|
<div ref="el" class="scroll-reveal" :style="{ animationDelay: `${delay}ms` }">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
delay?: number
|
|
}>()
|
|
|
|
const el = ref<HTMLElement | null>(null)
|
|
|
|
onMounted(() => {
|
|
if (!el.value) return
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('is-visible')
|
|
observer.unobserve(entry.target)
|
|
}
|
|
})
|
|
},
|
|
{ threshold: 0.1, rootMargin: '0px 0px -50px 0px' },
|
|
)
|
|
|
|
observer.observe(el.value)
|
|
|
|
onUnmounted(() => observer.disconnect())
|
|
})
|
|
</script>
|