fix: 에코 이미지 변경, 위치 가운데로 오도록 수정

sprint-team3 · Apr 2, 2024 · 691a108 · 691a108
1 parent 9283917
commit 691a108
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 39 deletions.
diff --git a/public/pngs/landing-echo.png b/public/pngs/landing-echo.png
diff --git a/src/components/landing/Echo/Echo.module.scss b/src/components/landing/Echo/Echo.module.scss
@@ -10,37 +10,27 @@
 }
 
 .echo {
-  @include responsive(T) {
-    right: 60%;
-    transform: translateX(60%) !important;
-  }
-
-  position: absolute;
-  right: 0;
-
-  aspect-ratio: 1.69 / 1;
-  height: 100%;
+  @include pos-center-x;
 
+  width: 107%;
+  height: 107%;
   background: url('/pngs/landing-echo.png') no-repeat center/cover;
-
   animation: show-echo 1s ease-in-out forwards;
 }
 
 .echo-shadow {
-  @include responsive(T) {
-    right: 45%;
-    transform: translateX(45%) !important;
-  }
-
   position: absolute;
-  right: 10%;
+  left: 40%;
+  transform: translateX(-50%);
 
-  aspect-ratio: 1.69 / 1;
-  height: 110%;
+  width: 107%;
+  height: 107%;
 
+  opacity: 0;
   background: url('/pngs/landing-echo-shadow.png') no-repeat center/cover;
 
-  animation: show-echo-shadow 1s ease-in-out forwards;
+  animation: show-echo 1s ease-in-out forwards;
+  animation-delay: 0.5s;
 }
 
 .side-scroll {
@@ -244,23 +234,6 @@
   }
 }
 
-@keyframes show-echo-shadow {
-  0% {
-    bottom: -10%;
-    opacity: 0;
-  }
-
-  50% {
-    bottom: -10%;
-    opacity: 0;
-  }
-
-  100% {
-    bottom: -5%;
-    opacity: 1;
-  }
-}
-
 @keyframes text-loop-left {
   0% {
     transform: translateY(0%);

diff --git a/src/hooks/useMouseMoveEffect.ts b/src/hooks/useMouseMoveEffect.ts
@@ -42,8 +42,8 @@ const useMouseMoveEffect = (moveScale: number) => {
 
         mainText.style.transform = `translate(${offsetX * moveScale}px, ${offsetY * moveScale}px)`;
         subText.style.transform = `translate(${offsetX * moveScale}px, ${offsetY * moveScale}px)`;
-        echo.style.transform = `translate(${-offsetX * moveScale}px, ${-offsetY * moveScale}px)`;
-        echoShadow.style.transform = `translate(${offsetX * 1}px, ${offsetY * 1}px)`;
+        echo.style.transform = `translate(calc(-50% + ${-offsetX * moveScale}px), ${-offsetY * moveScale}px)`;
+        echoShadow.style.transform = `translate(calc(-50% + ${offsetX * 1}px), ${offsetY * 1}px)`;
       });
     };