diff --git a/public/pngs/landing-echo.png b/public/pngs/landing-echo.png index 7cfb32de..6c8400e0 100644 Binary files a/public/pngs/landing-echo.png and b/public/pngs/landing-echo.png differ diff --git a/src/components/landing/Echo/Echo.module.scss b/src/components/landing/Echo/Echo.module.scss index 55dbd4ce..3f91f055 100644 --- 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 index 659d1c0d..c473b154 100644 --- 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)`; }); };