Merge pull request #46 from softeerbootcamp4th/feature/7-intro

[feat] 인트로 문구 애니메이션과 비디오 구현

src/App.jsx

@@ -1,12 +1,16 @@
+import { useEffect } from "react";
+import IntroSection from "./introSection";
+
 function App() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+    history.scrollRestoration = "manual";
+  }, []);
+
   return (
-    <div className="text-5xl graphic-gradient">
-      <div className="flex flex-col">
-        <span>다람쥐 헌 쳇바퀴에 타고파</span>
-        <span>Hyundai Sans Text Office</span>
-        <span className="font-ds-digital">0123456789</span>
-      </div>
-    </div>
+    <>
+      <IntroSection />
+    </>
   );
 }
 

src/introSection/index.jsx

@@ -1,6 +1,11 @@
 import useScrollTransition from "@/common/useScrollTransition.js";
+import vector from "./vector.svg";
+import style from "./index.module.css";
+import SpinningCarVideo from "./car-spin.mp4";
+import { useEffect, useRef } from "react";
 
 function IntroSection() {
+  const videoRef = useRef(null);
   const titleOpacity = useScrollTransition({
     scrollStart: 0,
     scrollEnd: 500,
@@ -12,14 +17,42 @@ function IntroSection() {
     opacity: titleOpacity,
   };
 
+  const videoTimeline = useScrollTransition({
+    scrollStart: 500,
+    scrollEnd: 1300,
+    valueStart: 0,
+    valueEnd: 2,
+  });
+
+  useEffect(() => {
+    videoRef.current.currentTime = videoTimeline;
+  }, [videoTimeline]);
+
   return (
     <div className="h-[2160px]">
-      <h1
-        className="text-8xl w-full flex items-center justify-center absolute top-[500px]"
-        style={titleStyle}
-      >
-        The new IONIQ 5
-      </h1>
+      <div className="z-50 fixed w-full flex justify-center top-[500px] -translate-y-1/2">
+        <h1
+          className={`${style.openTitle} ease-in text-8xl font-bold z-50`}
+          style={titleStyle}
+        >
+          The new IONIQ 5
+        </h1>
+
+        <div
+          className="absolute top-[66px] z-0 overflow-hidden"
+          style={titleStyle}
+        >
+          <img src={vector} />
+
+          <div
+            className={`${style.openVector} w-full h-full bg-white absolute top-0`}
+          />
+        </div>
+      </div>
+
+      <div className="mt-[800px] flex justify-center items-center overflow-hidden z-0">
+        <video src={SpinningCarVideo} ref={videoRef} className="scale-125" />
+      </div>
     </div>
   );
 }

src/introSection/index.module.css

@@ -0,0 +1,27 @@
+.openTitle {
+  animation: open-title 0.5s ease-in-out;
+}
+
+@keyframes open-title {
+  from {
+    transform: translateY(80px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+}
+
+.openVector {
+  animation: open-vector 0.3s ease-in-out 0.3s forwards;
+}
+
+@keyframes open-vector {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}

tailwind.redefine.js

@@ -69,6 +69,6 @@ export default {
     "title-l": ["32px", "44px"],
     "head-s": ["36px", "52px"],
     "head-m": ["45px", "64px"],
-    "head-l": ["57px", "80px"]
-  }
+    "head-l": ["57px", "80px"],
+  },
 };