Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 56aae94

Browse files
Merge pull request #41 from takuma-hmng8/dev
useDomSyncerが返すobjectにDOMRectsを追加
2 parents 180c5a0 + 8b8c5d5 commit 56aae94

File tree

15 files changed

+655
-570
lines changed

15 files changed

+655
-570
lines changed

‎app/domSyncer/DomSyncer.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,21 @@ export const DomSyncer = ({ state }: { state: number }) => {
4747
);
4848

4949
const domArr = useRef<(HTMLElement | Element)[]>([]);
50+
const contentArr = useRef<HTMLElement[]>([]);
5051

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

5455
if (state === 0) {
5556
domArr.current = [...document.querySelectorAll(".item")!];
57+
contentArr.current = Array.from(
58+
document.querySelectorAll<HTMLElement>(".content")
59+
);
5660
} else {
5761
domArr.current = [...document.querySelectorAll(".item2")!];
62+
contentArr.current = Array.from(
63+
document.querySelectorAll<HTMLElement>(".content2")
64+
);
5865
}
5966
CONFIG.waveArr = [...Array(domArr.current.length)].map(() => ({
6067
...CONFIG.waveConfig,
@@ -120,6 +127,17 @@ export const DomSyncer = ({ state }: { state: number }) => {
120127
),
121128
});
122129

130+
contentArr.current.forEach((content, i) => {
131+
if (
132+
domSyncerObj.domRects[i] &&
133+
domSyncerObj.isIntersecting(i, false)
134+
) {
135+
content.style.opacity = "1.0";
136+
content.style.top = `${domSyncerObj.domRects[i].top}px`;
137+
content.style.left = `${domSyncerObj.domRects[i].left}px`;
138+
}
139+
});
140+
123141
const main = mainShaderRef.current;
124142
if (main) {
125143
main.u_fx = syncedTexture;

‎app/domSyncer/page.tsx‎

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function Page() {
1313
position: "fixed",
1414
top: 0,
1515
width: "100%",
16-
height: "100%",
16+
height: "100vh",
1717
}}>
1818
<ShaderFx>
1919
<DomSyncer state={domSwitch} />
@@ -47,28 +47,52 @@ export default function Page() {
4747
{domSwitch === 0 ? (
4848
<>
4949
{[...Array(4)].map((_, i) => (
50-
<div
51-
className="item"
52-
key={i}
53-
style={{
54-
width: "calc(50% - 40px)",
55-
height: "80vh",
56-
zIndex: 100,
57-
borderRadius: `${i * 50}px`,
58-
}}></div>
50+
<div key={i} style={{ width: "calc(50% - 40px)" }}>
51+
<div
52+
className="item"
53+
style={{
54+
height: "120vh",
55+
zIndex: 100,
56+
borderRadius: `${i * 50}px`,
57+
}}></div>
58+
<div
59+
className="content"
60+
style={{
61+
marginTop: "40px",
62+
position: "fixed",
63+
top: 0,
64+
left: 0,
65+
opacity: 0,
66+
}}>
67+
<h1 style={{ fontSize: "40px" }}>title</h1>
68+
<p style={{ fontSize: "26px" }}>text</p>
69+
</div>
70+
</div>
5971
))}
6072
</>
6173
) : (
6274
<>
6375
{[...Array(2)].map((_, i) => (
64-
<div
65-
className="item2"
66-
key={i}
67-
style={{
68-
width: "100%",
69-
height: "80vh",
70-
zIndex: 100,
71-
}}></div>
76+
<div key={i} style={{ width: "100%" }}>
77+
<div
78+
className="item2"
79+
style={{
80+
height: "80vh",
81+
zIndex: 100,
82+
}}></div>
83+
<div
84+
className="content2"
85+
style={{
86+
marginTop: "40px",
87+
position: "fixed",
88+
top: 0,
89+
left: 0,
90+
opacity: 0,
91+
}}>
92+
<h1 style={{ fontSize: "20px" }}>title</h1>
93+
<p style={{ fontSize: "16px" }}>text</p>
94+
</div>
95+
</div>
7296
))}
7397
</>
7498
)}

‎app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function RootLayout({
1818
children: React.ReactNode;
1919
}) {
2020
return (
21-
<html lang="en"style={{overflow: "hidden"}}>
21+
<html lang="en">
2222
<body className={playfair.className}>{children}</body>
2323
</html>
2424
);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /