useDomSyncerが返すobjectにDOMRectsを追加 #41

Original file line number	Diff line number	Diff line change
Expand Up		@@ -47,14 +47,21 @@ export const DomSyncer = ({ state }: { state: number }) => {
		);

		const domArr = useRef<(HTMLElement \| Element)[]>([]);
	const contentArr = useRef<HTMLElement[]>([]);

		useLayoutEffect(() => {
		CONFIG.waveArr = [];

		if (state === 0) {
		domArr.current = [...document.querySelectorAll(".item")!];
	contentArr.current = Array.from(
	document.querySelectorAll<HTMLElement>(".content")
	);
		} else {
		domArr.current = [...document.querySelectorAll(".item2")!];
	contentArr.current = Array.from(
	document.querySelectorAll<HTMLElement>(".content2")
	);
		}
		CONFIG.waveArr = [...Array(domArr.current.length)].map(() => ({
		...CONFIG.waveConfig,
Expand Down Expand Up		@@ -120,6 +127,17 @@ export const DomSyncer = ({ state }: { state: number }) => {
		),
		});

	contentArr.current.forEach((content, i) => {
	if (
	domSyncerObj.domRects[i] &&
	domSyncerObj.isIntersecting(i, false)
	) {
	content.style.opacity = "1.0";
	content.style.top = `${domSyncerObj.domRects[i].top}px`;
	content.style.left = `${domSyncerObj.domRects[i].left}px`;
	}
	});

		const main = mainShaderRef.current;
		if (main) {
		main.u_fx = syncedTexture;
Expand Down

60 changes: 42 additions & 18 deletions app/domSyncer/page.tsx

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,7 +13,7 @@ export default function Page() {
		position: "fixed",
		top: 0,
		width: "100%",
	height: "100%",
	height: "100vh",
		}}>
		<ShaderFx>
		<DomSyncer state={domSwitch} />
Expand Down Expand Up		@@ -47,28 +47,52 @@ export default function Page() {
		{domSwitch === 0 ? (
		<>
		{[...Array(4)].map((_, i) => (
	<div
	className="item"
	key={i}
	style={{
	width: "calc(50% - 40px)",
	height: "80vh",
	zIndex: 100,
	borderRadius: `${i * 50}px`,
	}}></div>
	<div key={i} style={{ width: "calc(50% - 40px)" }}>
	<div
	className="item"
	style={{
	height: "120vh",
	zIndex: 100,
	borderRadius: `${i * 50}px`,
	}}></div>
	<div
	className="content"
	style={{
	marginTop: "40px",
	position: "fixed",
	top: 0,
	left: 0,
	opacity: 0,
	}}>
	<h1 style={{ fontSize: "40px" }}>title</h1>
	<p style={{ fontSize: "26px" }}>text</p>
	</div>
	</div>
		))}
		</>
		) : (
		<>
		{[...Array(2)].map((_, i) => (
	<div
	className="item2"
	key={i}
	style={{
	width: "100%",
	height: "80vh",
	zIndex: 100,
	}}></div>
	<div key={i} style={{ width: "100%" }}>
	<div
	className="item2"
	style={{
	height: "80vh",
	zIndex: 100,
	}}></div>
	<div
	className="content2"
	style={{
	marginTop: "40px",
	position: "fixed",
	top: 0,
	left: 0,
	opacity: 0,
	}}>
	<h1 style={{ fontSize: "20px" }}>title</h1>
	<p style={{ fontSize: "16px" }}>text</p>
	</div>
	</div>
		))}
		</>
		)}
Expand Down

2 changes: 1 addition & 1 deletion app/layout.tsx

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,7 +18,7 @@ export default function RootLayout({
		children: React.ReactNode;
		}) {
		return (
	<html lang="en" style={{ overflow: "hidden" }}>
	<html lang="en">
		<body className={playfair.className}>{children}</body>
		</html>
		);
Expand Down

Navigation Menu