diff --git a/src/components/main/MainUam.jsx b/src/components/main/MainUam.jsx index 4aa47b4..8985766 100644 --- a/src/components/main/MainUam.jsx +++ b/src/components/main/MainUam.jsx @@ -11,6 +11,7 @@ function MainAirspaceTransition() { const lineRef = useRef([]); const dotRef = useRef(null); const uamImageRef = useRef(null); // ← 추가 + const isMobile = window.innerWidth <= 768; useEffect(() => { const ctx = gsap.context(() => { @@ -19,7 +20,12 @@ function MainAirspaceTransition() { 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 }); // ← 추가 - + // dot 초기 x 이동거리 + gsap.set(dotRef.current, { + x: isMobile ? -160 : -320, + opacity: 0, + scale: 1, + }); const tl = gsap.timeline({ scrollTrigger: { trigger: sectionRef.current, @@ -72,11 +78,10 @@ function MainAirspaceTransition() { tl.to(dotRef.current, { x: 0, y: 0, - scale: 52, + scale: isMobile ? 42 : 52, duration: 1.2, ease: "power2.inOut", }); - // airspace-uam-content + UAM 이미지 동시 등장 ← 수정 tl.to( [".airspace-uam-content", uamImageRef.current], @@ -102,7 +107,11 @@ function MainAirspaceTransition() {

UAM SYSTEM

-

도심 항공 네트워크로

+

+ 도심 항공 + + 네트워크로 +

diff --git a/src/css/main.css b/src/css/main.css index ddc35c0..0cca8e6 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -221,10 +221,18 @@ body{overflow-x:hidden;} .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;} +.airspace-mobile-br{display:none;} + +@media (max-width:768px){ + .airspace-moving-dot{left:88%;top:43%;transform:translate(-50%,-50%);} + .airspace-dot-uam{width:150px;} + .airspace-uam-content{left:0;right:0;top:auto;bottom:7%;transform:none;padding:0 6vw;max-width:100%;} + .airspace-uam-content h2{font-size:clamp(38px,10vw,58px);line-height:.95;letter-spacing:-.07em;word-break:keep-all;} + .airspace-uam-content span{font-size:14px;line-height:1.7;word-break:keep-all;} + .airspace-dot-image img{width: 16px;height:16%} + .airspace-dot-image{ + transform:translateX(-5%); + } } @keyframes uamShine{0%,48%{transform:translateX(-120%);opacity:0;}58%{opacity:.75;}76%,100%{transform:translateX(120%);opacity:0;}}