useDomSyncerが返すobjectにDOMRectsを追加

Author: takuma-hmng8

app/domSyncer/DomSyncer.tsx

@@ -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,
@@ -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;

app/domSyncer/page.tsx

@@ -13,7 +13,7 @@ export default function Page() {
                position: "fixed",
                top: 0,
                width: "100%",
-               height: "100%",
+               height: "100vh",
             }}>
             <ShaderFx>
                <DomSyncer state={domSwitch} />
@@ -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>
                   ))}
                </>
             )}

app/layout.tsx

@@ -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>
    );