37 lines
1.0 KiB
JavaScript
37 lines
1.0 KiB
JavaScript
import { useEffect } from "react";
|
|
|
|
/**
|
|
* Scroll-reveal for elements with the `.reveal` class.
|
|
* Above-the-fold content should NOT use `.reveal` (it must be visible instantly);
|
|
* this is for sections below the fold. A failsafe guarantees nothing stays hidden.
|
|
*/
|
|
export default function useReveal() {
|
|
useEffect(() => {
|
|
const els = document.querySelectorAll(".reveal");
|
|
if (!("IntersectionObserver" in window)) {
|
|
els.forEach((el) => el.classList.add("in"));
|
|
return;
|
|
}
|
|
const io = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((e) => {
|
|
if (e.isIntersecting) {
|
|
e.target.classList.add("in");
|
|
io.unobserve(e.target);
|
|
}
|
|
});
|
|
},
|
|
{ rootMargin: "0px 0px -8% 0px", threshold: 0.08 }
|
|
);
|
|
els.forEach((el) => io.observe(el));
|
|
const failsafe = setTimeout(
|
|
() => els.forEach((el) => el.classList.add("in")),
|
|
1600
|
|
);
|
|
return () => {
|
|
io.disconnect();
|
|
clearTimeout(failsafe);
|
|
};
|
|
}, []);
|
|
}
|