e.stopPropagation()}
- className={_.join(
- ["home-page2 h-screen w-full fixed left-0 origin-top overflow-hidden"],
- " "
- )}
+ className={_.join(["h-screen w-full fixed left-0 overflow-hidden"], " ")}
style={{
top: top,
- transform: `rotateX(${
- window.scrollY > 0
- ? window.scrollY <= height
- ? 90 - (window.scrollY / height) * 90
- : 0
- : 90
- }deg) scale(${scale})`,
+ perspective: "400px",
}}
>
e.stopPropagation()}
className={_.join(
- [
- "relative shadow-2xl transform flex bg-white text-center overflow-hidden",
- ],
+ [" home-page2 h-full w-full origin-bottom overflow-hidden"],
" "
)}
style={{
- transform: `translateX(${boxPosition.translateX}%) rotate(${boxPosition.rotate}deg) translateY(${boxPosition.translateY}%)`,
- width: "140%",
- height: "140%",
+ transformStyle: "preserve-3d",
+ transform: `rotateX(${rotateX}deg)`,
}}
>
-
-
-
- {/* mobile phone */}
-
- {/* video */}
);
}
diff --git a/src/views/Home/Landscape/Page3/index.js b/src/views/Home/Landscape/Page3/index.js
index a578c29..c5d16b1 100644
--- a/src/views/Home/Landscape/Page3/index.js
+++ b/src/views/Home/Landscape/Page3/index.js
@@ -1,30 +1,91 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
import _ from "lodash";
import scroll from "../../../../utils/scroll";
-import testResultImage from "../../../../assets/images/test-result.svg";
-
+import testResultImage from "../../../../assets/images/test-result.png";
+// import testPageInfoImage from "../../../../assets/images/test-page-info.svg";
+import testPageImage from "../../../../assets/images/test-page.svg";
+import testPageFormulaImage from "../../../../assets/images/test-page-formula.svg";
export default function Page3({ list, page }) {
+ const height = window.innerHeight;
const [top, setTop] = useState(window.innerHeight);
+ const [translateX, setTranslateX] = useState(null);
- useEffect(() => {
+ useEffect(() => {
+ setTop(scroll.homeScrollHandler(page));
+ setTranslateX(
+ scroll.linearFormula(
+ window.scrollY > 7 * height ? 7 * height : window.scrollY,
+ 0,
+ 100,
+ 6.3 * height,
+ 7 * height
+ )
+ );
window.addEventListener("scroll", (e) => {
- setTop(scroll.homeScrollHandler(page));
+ const scrollY = window.scrollY;
+ if (scrollY <= 6.3 * height) {
+ setTop(scroll.homeScrollHandler(page));
+ }
+ if (scrollY > 6.3 && scrollY < 7 * height) {
+ translateXHandler(window.scrollY);
+ }
});
}, []);
+
+ const translateXHandler = useCallback(
+ (scrollY) => {
+ if (scrollY < 6.3 * height) {
+ setTranslateX(() => 0);
+ } else if (scrollY >= 6.3 * height && scrollY <= 7 * height) {
+ setTranslateX(() =>
+ scroll.linearFormula(window.scrollY, 0, 100, 6.3 * height, 7 * height)
+ );
+ } else {
+ setTranslateX(() => 100);
+ }
+ },
+ [translateX]
+ );
return (
0 ? "opacity-0 pointer-events-none" : "opacity-100",
+ "fixed left-0 h-screen w-full bg-white transition-opacity duration-1000 flex flex-row justify-center items-end z-30",
+ top > 0 ? "opacity-0" : "opacity-100",
],
" "
)}
- style={{ top: top }}
+ style={{
+ top: top,
+ }}
>
-
+
+
+
+
+
+
);
}
-
diff --git a/src/views/Home/Landscape/Page4/index.js b/src/views/Home/Landscape/Page4/index.js
index 69c559a..ff5da84 100644
--- a/src/views/Home/Landscape/Page4/index.js
+++ b/src/views/Home/Landscape/Page4/index.js
@@ -10,15 +10,18 @@ export default function Page4({ list, page }) {
useEffect(() => {
window.addEventListener("scroll", (e) => {
- setTop(scroll.homeScrollHandler(page));
+ if(window.scrollY > 7 * window.innerHeight) {
+ setTop(() => scroll.homeScrollHandler(page));
+ }
});
}, []);
+
return (
{
+
+ const testTransformHandler = useCallback((scrollY) => {
const height = window.innerHeight;
if (scrollY <= 4.5 * height) {
setTranslateY(() => 0);
@@ -42,7 +43,8 @@ export default function Test({ title, duration, questions }) {
);
setTestPosition(() => null);
}
- };
+ },[testPosition, translateY]);
+
return (
e.stopPropagation()}
diff --git a/src/views/Home/Landscape/index.js b/src/views/Home/Landscape/index.js
index 3e6df88..8f4557a 100644
--- a/src/views/Home/Landscape/index.js
+++ b/src/views/Home/Landscape/index.js
@@ -32,7 +32,7 @@ export default function Home() {
return (
diff --git a/src/views/Home/Landscape/Page2/Mobile/Video/index.js b/src/views/Home/Landscape/Page2/Mobile/Video/index.js
index 0631fc5..39aa12c 100644
--- a/src/views/Home/Landscape/Page2/Mobile/Video/index.js
+++ b/src/views/Home/Landscape/Page2/Mobile/Video/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
import _ from "lodash";
import ARImage from "../../../../../../assets/images/ar.jpg";
import scroll from "../../../../../../utils/scroll";
@@ -15,11 +15,15 @@ export default function Video({ selectedVideo, videoPosition }) {
3 * height
);
window.addEventListener("scroll", () => {
- videoTopPositionHandler(window.scrollY);
+ const scrollY = window.scrollY;
+ if(scrollY > 0 && scrollY < 3 * height) {
+ videoTopPositionHandler(scrollY);
+
+ }
});
}, []);
- const videoTopPositionHandler = (scrollY) => {
+ const videoTopPositionHandler = useCallback((scrollY) => {
if (scrollY < 2.8 * height) {
setTop(() => 50);
} else if (scrollY >= 2.8 * height && scrollY < 3 * height) {
@@ -29,14 +33,15 @@ export default function Video({ selectedVideo, videoPosition }) {
} else {
setTop(() => 50);
}
- };
+ },[top]);
+
return (