[feat] 비디오 첨부, 스크롤 띠라 비디오 타임라인 변경

softeerbootcamp4th · Jul 29, 2024 · 6f0e2cc · 6f0e2cc
1 parent 05d9ea0
commit 6f0e2cc
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/introSection/car-spin.mp4 b/src/introSection/car-spin.mp4
diff --git a/src/introSection/index.jsx b/src/introSection/index.jsx
@@ -1,8 +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,
@@ -14,11 +17,22 @@ 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]">
-      <div className="pointer-events-none fixed w-full flex justify-center top-[500px] -translate-y-1/2">
+      <div className="z-50 fixed w-full flex justify-center top-[500px] -translate-y-1/2">
         <h1
-          className={`${style.openTitle} ease-in text-8xl z-50`}
+          className={`${style.openTitle} ease-in text-8xl font-bold z-50`}
           style={titleStyle}
         >
           The new IONIQ 5
@@ -32,9 +46,13 @@ function IntroSection() {
 
           <div
             className={`${style.openVector} w-full h-full bg-white absolute top-0`}
-          ></div>
+          />
         </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>
   );
 }