diff --git a/src/components/main/MainUam.jsx b/src/components/main/MainUam.jsx index 989b067..4aa47b4 100644 --- a/src/components/main/MainUam.jsx +++ b/src/components/main/MainUam.jsx @@ -1,6 +1,7 @@ import { useEffect, useRef } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; +import uamImg from "../../../public/images/uam-silver.png"; gsap.registerPlugin(ScrollTrigger); function MainAirspaceTransition() { @@ -9,22 +10,15 @@ function MainAirspaceTransition() { const rightRef = useRef(null); const lineRef = useRef([]); const dotRef = useRef(null); - const uamImageRef = useRef(null); + const uamImageRef = useRef(null); // ← 추가 useEffect(() => { const ctx = gsap.context(() => { gsap.set(rightRef.current, { xPercent: 100 }); gsap.set(lineRef.current, { scaleX: 0, transformOrigin: "left center" }); - gsap.set(dotRef.current, { - x: -320, - opacity: 0, - scale: 1, - }); - - gsap.set(".airspace-uam-content", { - opacity: 0, - y: 36, - }); + gsap.set(dotRef.current, { x: -320, opacity: 0, scale: 1 }); + gsap.set(".airspace-uam-content", { opacity: 0, y: 36 }); + gsap.set(uamImageRef.current, { opacity: 0 }); // ← 추가 const tl = gsap.timeline({ scrollTrigger: { @@ -71,39 +65,21 @@ function MainAirspaceTransition() { "<", ); - // /* 마지막: 동그라미 줌 */ - // tl.to(dotRef.current, { - // scale: 46, - // duration: 1.2, - // ease: "power2.inOut", - // }); - - // tl.to( - // ".airspace-uam-content", - // { - // opacity: 1, - // y: 0, - // duration: 0.8, - // ease: "power2.out", - // }, - // "-=0.35" - // ); - - /* 마지막: 내부 점 제거 */ tl.call(() => { dotRef.current?.classList.add("is-zooming"); }); - /* 마지막: 동그라미 줌 */ tl.to(dotRef.current, { x: 0, y: 0, - scale: 72, + scale: 52, duration: 1.2, ease: "power2.inOut", }); + + // airspace-uam-content + UAM 이미지 동시 등장 ← 수정 tl.to( - ".airspace-uam-content", + [".airspace-uam-content", uamImageRef.current], { opacity: 1, y: 0, @@ -141,11 +117,13 @@ function MainAirspaceTransition() { ))} -
- -
- + {/* 동그라미 + UAM 이미지 */} +
+
+ UAM Aircraft +
+

UAM NETWORK

Urban Air Mobility

diff --git a/src/css/main.css b/src/css/main.css index 682e870..ddc35c0 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -211,7 +211,7 @@ body{overflow-x:hidden;} .airspace-panel p{margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.26em;color:#3a4081;} .airspace-panel h2{margin:0;max-width:760px;font-size:clamp(48px,6vw,96px);font-weight:800;line-height:.96;letter-spacing:-.08em;color:#0e1120;} .airspace-lines{position:absolute;inset:0;z-index:5;pointer-events:none;} -.airspace-moving-dot{position:absolute;left:68%;top:49%;z-index:6;width:54px;height:54px;border-radius:50%;background:#3a4081;border:1px solid rgba(58,64,129,.14);box-shadow:0 0 0 12px rgba(58,64,129,.06),0 20px 50px rgba(58,64,129,.18);transform-origin:center center;} +.airspace-moving-dot{position:absolute;left:68%;top:47%;z-index:6;width:54px;height:54px;border-radius:50%;background:#3a4081;border:1px solid rgba(58,64,129,.14);box-shadow:0 0 0 12px rgba(58,64,129,.06),0 20px 50px rgba(58,64,129,.18);transform-origin:center center;} .airspace-moving-dot::before{content:"";position:absolute;inset:20px;border-radius:50%;background:#ffffff;opacity:.9;} .airspace-uam-content{position:absolute;left:8vw;top:50%;transform:translateY(-50%);z-index:20;max-width:760px;color:#ffffff;pointer-events:none;} @@ -219,11 +219,13 @@ body{overflow-x:hidden;} .airspace-uam-content h2{margin:0 0 24px;font-size:clamp(54px,7vw,104px);font-weight:800;line-height:.92;letter-spacing:-.07em;color:#ffffff;} .airspace-uam-content span{display:block;max-width:560px;font-size:18px;line-height:1.8;font-weight:500;color:rgba(255,255,255,.72);} - +.airspace-dot-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;z-index:2;pointer-events:none;} +.airspace-dot-image img{width:32%;height:32%;object-fit:contain;filter:drop-shadow(0 8px 32px rgba(58,64,129,.28));animation:float-uam 5s ease-in-out infinite;will-change:transform;} @media (max-width:768px){.airspace-panel{padding:0 28px;} .airspace-panel h2{font-size:44px;} .airspace-line{left:28px;} } -@keyframes uamShine{0%,48%{transform:translateX(-120%);opacity:0;}58%{opacity:.75;}76%,100%{transform:translateX(120%);opacity:0;}} \ No newline at end of file +@keyframes uamShine{0%,48%{transform:translateX(-120%);opacity:0;}58%{opacity:.75;}76%,100%{transform:translateX(120%);opacity:0;}} +@keyframes float-uam{0%{transform:translateY(0px);}48%{transform:translateY(-1px);}100%{transform:translateY(0px);}}