Import source: cshare-app/src/hooks/useScrollReveal
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
export function useScrollReveal(threshold = 0.15) {
|
||||
const ref = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
const children = el.querySelectorAll('.scroll-reveal');
|
||||
if (children.length === 0) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('revealed');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold, rootMargin: '0px 0px -40px 0px' }
|
||||
);
|
||||
|
||||
children.forEach((child) => observer.observe(child));
|
||||
return () => observer.disconnect();
|
||||
}, [threshold]);
|
||||
|
||||
return ref;
|
||||
}
|
||||
Reference in New Issue
Block a user