From 2cadd4272edd91355cb1563c73524537dadeabf6 Mon Sep 17 00:00:00 2001 From: geun <1416geun@naver.com> Date: Wed, 15 Apr 2026 15:02:21 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A9=94=EC=9D=B8=20=ED=83=80=EC=9D=B4?= =?UTF-8?q?=EB=B0=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/common.css | 10 ++---- src/pages/MainPage.jsx | 79 ++++++++++++++++++++++-------------------- 2 files changed, 45 insertions(+), 44 deletions(-) diff --git a/src/css/common.css b/src/css/common.css index 00a0605..8e7d80f 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -23,10 +23,9 @@ body{overflow-x:hidden;} .main-bg{position:relative;width:min(1440px,calc(100vw - 80px));height:600px;border-radius:24px;overflow:hidden;transform-origin:center center;will-change:transform,width,height,border-radius;background:#050b17;} .main-bg-hero1{position:absolute;inset:0;background:url('/images/hero1.png') no-repeat 50% 50%/cover;transform:scale(1.04);} -/* .main-bg-hero2{position:absolute;inset:0;background:url('/images/hero2.png') no-repeat 50% 50%/cover;opacity:0;} */ -.main-bg-hero2{position:absolute;inset:0;opacity:0;overflow:hidden;} -.hero-video{width:100%;height:100%;object-fit:cover;} -.main-bg-hero3{position:absolute;inset:0;background:url('/images/hero3.png') no-repeat 50% 50%/cover;opacity:0;} +.main-bg-hero2{position:absolute;inset:0;opacity:0;overflow:hidden;will-change:transform,opacity,filter;} +.main-bg-hero2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,8,20,.18) 0%,rgba(3,8,20,.28) 35%,rgba(3,8,20,.42) 100%),rgba(0,0,0,.18);pointer-events:none;} +.hero-video{width:100%;height:100%;object-fit:cover;filter:brightness(.82) contrast(1.06) saturate(.96);transform:scale(1.02);} .main-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,24,.12) 0%,rgba(4,10,24,.24) 38%,rgba(4,10,24,.56) 100%),linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.12) 100%);z-index:1;pointer-events:none;} .main-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.06) 0%,rgba(255,255,255,.024) 18%,rgba(255,255,255,0) 44%),radial-gradient(circle at 50% 78%,rgba(58,64,129,.16) 0%,rgba(58,64,129,.08) 20%,rgba(58,64,129,0) 44%);z-index:1;pointer-events:none;} @@ -44,17 +43,14 @@ body{overflow-x:hidden;} .main-grid{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(174,206,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(174,206,255,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 20%,rgba(0,0,0,.72) 52%,rgba(0,0,0,.18) 100%);animation:gridShift 10s linear infinite;} .main-text{position:absolute;inset:0;z-index:3;pointer-events:none;} - .main-text .text{position:absolute;color:#fff;text-shadow:0 10px 30px rgba(0,0,0,.22);will-change:transform,opacity,filter;} .text-left-bottom{left:92px;bottom:124px;width:100%;max-width:760px;text-align:left;font-size:64px;line-height:1.12;font-weight:700;letter-spacing:-.05em;} - .text-center-hero{left:50%;top:45%;transform:translate(-50%,-50%);width:min(1080px,calc(100% - 120px));text-align:center;font-size:56px;line-height:1.24;font-weight:700;letter-spacing:-.045em;} .main-text .text-change{opacity:0;} .main-kicker{display:block;margin-bottom:18px;font-size:12px;letter-spacing:.22em;font-weight:600;color:rgba(255,255,255,.68);} - .main-text .text-fill .fill-line{display:inline-block;color:rgba(255,255,255,.28);background:linear-gradient(90deg,#fff 0%,#fff 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 100%);background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .main-progress{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:min(240px,calc(100% - 48px));height:2px;background:rgba(255,255,255,.22);z-index:3;overflow:hidden;border-radius:999px;} diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx index 0ae687d..3cdcc43 100644 --- a/src/pages/MainPage.jsx +++ b/src/pages/MainPage.jsx @@ -8,30 +8,27 @@ function MainPage() { const sectionRef = useRef(null); const bgRef = useRef(null); const hero2Ref = useRef(null); - const hero3Ref = useRef(null); + const videoRef = useRef(null); const text1Ref = useRef(null); const text2Ref = useRef(null); - const text3Ref = useRef(null); const progressBarRef = useRef(null); useEffect(() => { const ctx = gsap.context(() => { - gsap.set(hero2Ref.current, { opacity: 0, scale: 1.14, filter: "blur(10px)" }); - gsap.set(hero3Ref.current, { opacity: 0, scale: 1.14, filter: "blur(10px)" }); + const videoEl = videoRef.current; - gsap.set(text2Ref.current, { - opacity: 0, - y: 48, - x: 0, - scale: 0.96, - filter: "blur(10px)", - }); + if (videoEl) { + videoEl.pause(); + videoEl.currentTime = 0; + } + + gsap.set(hero2Ref.current, { opacity: 0, scale: 1.12, filter: "blur(12px)" }); - gsap.set(text3Ref.current, { + gsap.set(text2Ref.current, { opacity: 0, - y: 48, + y: 54, x: 0, - scale: 0.96, + scale: 0.965, filter: "blur(10px)", }); @@ -41,42 +38,56 @@ function MainPage() { const darkHeroTrigger = ScrollTrigger.create({ trigger: sectionRef.current, start: "top top", - end: "+=2600", + end: "+=3000", onEnter: () => document.body.classList.add("is-dark-hero"), onEnterBack: () => document.body.classList.add("is-dark-hero"), onLeave: () => document.body.classList.remove("is-dark-hero"), onLeaveBack: () => document.body.classList.remove("is-dark-hero"), }); + let hero2Started = false; + const tl = gsap.timeline({ scrollTrigger: { trigger: sectionRef.current, start: "top top", - end: "+=2600", - scrub: 1.2, + end: "+=3000", + scrub: 1.15, pin: true, anticipatePin: 1, + onUpdate: (self) => { + if (!videoEl) return; + + if (self.progress >= 0.42 && !hero2Started) { + hero2Started = true; + videoEl.currentTime = 0; + videoEl.play().catch(() => {}); + } + + if (self.progress < 0.42 && hero2Started) { + hero2Started = false; + videoEl.pause(); + videoEl.currentTime = 0; + } + }, }, }); tl.to(bgRef.current, { width: "100vw", height: "100vh", borderRadius: 0, ease: "none" }, 0) .to(bgRef.current, { scale: 1.08, ease: "none" }, 0) .to(progressBarRef.current, { width: "100%", ease: "none" }, 0) - .to(".fill-line", { backgroundPosition: "0% 0%", ease: "none", stagger: 0.12, duration: 1.2 }, 0.08) - - .to(text1Ref.current, { opacity: 0, y: -40, filter: "blur(8px)", ease: "none" }, 1.35) - - .to(hero2Ref.current, { opacity: 1, scale: 1.03, filter: "blur(0px)", ease: "none" }, 1.15) - .to(text2Ref.current, { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", ease: "none" }, 1.24) - - .to(hero2Ref.current, { scale: 1.1, ease: "none" }, 1.72) - .to(text2Ref.current, { opacity: 0, y: -28, scale: 0.98, filter: "blur(8px)", ease: "none" }, 2.02); + .to(".fill-line", { backgroundPosition: "0% 0%", ease: "none", stagger: 0.14, duration: 1.35 }, 0.1) - // .to(hero3Ref.current, { opacity: 1, scale: 1.03, filter: "blur(0px)", ease: "none" }, 2.14) - // .to(text3Ref.current, { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", ease: "none" }, 2.28) - // .to(hero3Ref.current, { scale: 1.08, ease: "none" }, 2.82); + .to(hero2Ref.current, { opacity: 1, scale: 1.035, filter: "blur(0px)", ease: "none" }, 1.55) + .to(text1Ref.current, { opacity: 0, y: -34, scale: 0.985, filter: "blur(8px)", ease: "none" }, 1.78) + .to(text2Ref.current, { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", ease: "none" }, 1.95) + .to(hero2Ref.current, { scale: 1.095, ease: "none" }, 2.5); return () => { + if (videoEl) { + videoEl.pause(); + videoEl.currentTime = 0; + } darkHeroTrigger.kill(); document.body.classList.remove("is-dark-hero"); }; @@ -91,10 +102,10 @@ function MainPage() {
+
-
- {/*
*/}
@@ -116,12 +127,6 @@ function MainPage() {
안전한 하늘길을 설계합니다
- - {/*
- 공역관리와 드론 교통관리(UTM)를 기반으로 -
- 실제 운영 가능한 항공 시스템을 구축합니다 -
*/}