67 lines
1.4 KiB
TypeScript
67 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useRef, useState, ReactNode } from 'react'
|
|
|
|
interface ScrollRevealProps {
|
|
children: ReactNode
|
|
direction?: 'up' | 'down' | 'left' | 'right'
|
|
delay?: number
|
|
className?: string
|
|
}
|
|
|
|
export function ScrollReveal({
|
|
children,
|
|
direction = 'up',
|
|
delay = 0,
|
|
className = '',
|
|
}: ScrollRevealProps) {
|
|
const [isVisible, setIsVisible] = useState(false)
|
|
const ref = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
([entry]) => {
|
|
if (entry.isIntersecting) {
|
|
setIsVisible(true)
|
|
observer.disconnect()
|
|
}
|
|
},
|
|
{
|
|
threshold: 0.1,
|
|
rootMargin: '50px',
|
|
}
|
|
)
|
|
|
|
if (ref.current) {
|
|
observer.observe(ref.current)
|
|
}
|
|
|
|
return () => {
|
|
observer.disconnect()
|
|
}
|
|
}, [])
|
|
|
|
const directionClasses = {
|
|
up: 'translate-y-8',
|
|
down: '-translate-y-8',
|
|
left: 'translate-x-8',
|
|
right: '-translate-x-8',
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={`transition-all duration-700 ease-out ${
|
|
isVisible
|
|
? 'opacity-100 translate-x-0 translate-y-0'
|
|
: `opacity-0 ${directionClasses[direction]}`
|
|
} ${className}`}
|
|
style={{
|
|
transitionDelay: isVisible ? `${delay}ms` : '0ms',
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|