Rework #6
@ -6,20 +6,21 @@ export function LazyImage({ src, alt, className }: { src: string; alt: string; c
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (ref.current) {
|
if (ref.current) {
|
||||||
let toggle = false;
|
|
||||||
const observer = new IntersectionObserver((entries) => {
|
const observer = new IntersectionObserver((entries) => {
|
||||||
if (entries.some(x => x.isIntersecting)) {
|
if (entries.some(x => x.isIntersecting)) {
|
||||||
setLoaded(true);
|
setLoaded(true);
|
||||||
toggle = !toggle;
|
ref.current?.animate([
|
||||||
ref.current?.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 500, easing: "ease-in-out" });
|
{ opacity: 0 },
|
||||||
|
{ opacity: 1 }
|
||||||
|
], {
|
||||||
|
duration: 300,
|
||||||
|
easing: "ease-in-out"
|
||||||
|
});
|
||||||
observer.disconnect();
|
observer.disconnect();
|
||||||
}
|
}
|
||||||
else {
|
}, {
|
||||||
if (toggle) {
|
rootMargin: "200px",
|
||||||
console.log("fade out");
|
threshold: 0
|
||||||
ref.current?.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 500, easing: "ease-in-out" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
observer.observe(ref.current);
|
observer.observe(ref.current);
|
||||||
return () => {
|
return () => {
|
||||||
|
Loading…
Reference in New Issue
Block a user