Songs2YT
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, type RefObject } from "react";
|
|
|
|
type Props = {
|
|
sectionRef: RefObject<HTMLElement | null>;
|
|
title: string;
|
|
offset?: number;
|
|
};
|
|
|
|
export function SectionScrollTitle({ sectionRef, title, offset = 350 }: Props) {
|
|
const [offsetX, setOffsetX] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const section = sectionRef.current;
|
|
if (!section) return;
|
|
|
|
const update = () => {
|
|
const rect = section.getBoundingClientRect();
|
|
const viewportHeight = window.innerHeight;
|
|
const progress = Math.min(
|
|
1,
|
|
Math.max(0, (viewportHeight - rect.top) / (viewportHeight + rect.height * 0.5)),
|
|
);
|
|
setOffsetX(progress * offset);
|
|
};
|
|
|
|
update();
|
|
window.addEventListener("scroll", update, { passive: true });
|
|
window.addEventListener("resize", update);
|
|
return () => {
|
|
window.removeEventListener("scroll", update);
|
|
window.removeEventListener("resize", update);
|
|
};
|
|
}, [sectionRef, offset]);
|
|
|
|
return (
|
|
<span
|
|
className="pointer-events-none absolute bottom-0 left-1/2 z-0 select-none whitespace-nowrap text-7xl font-bold leading-none text-white/[0.04] sm:text-8xl lg:text-9xl"
|
|
style={{ transform: `translateX(calc(-50% + ${offsetX}px))` }}
|
|
aria-hidden="true"
|
|
>
|
|
{title}
|
|
</span>
|
|
);
|
|
}
|