feat: 메인 섹션 애니메이션 추가

woowacourse-teams · Sep 13, 2024 · c34f5cf · c34f5cf
1 parent 6d066cc
commit c34f5cf
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 20 deletions.
diff --git a/frontend/src/pages/Landing/index.tsx b/frontend/src/pages/Landing/index.tsx
@@ -2,11 +2,11 @@ import { routes } from '@router/path';
 import { useNavigate } from 'react-router-dom';
 
 import DashboardWebp from '@assets/images/dashboard.webp';
-import ManStrugglingWebp from '@assets/images/manStruggling.webp';
-import MessageWebp from '@assets/images/message.webp';
 import Feature1Webp from '@assets/images/feature1.webp';
 import Feature2Webp from '@assets/images/feature2.webp';
 import Feature3Webp from '@assets/images/feature3.webp';
+import ManStrugglingWebp from '@assets/images/manStruggling.webp';
+import MessageWebp from '@assets/images/message.webp';
 import { HiChevronDown, HiChevronUp } from 'react-icons/hi2';
 
 import Button from '@components/_common/atoms/Button';
@@ -41,10 +41,11 @@ export default function Landing() {
 
       <S.MainSection>
         <S.Catchphrase>
-          복잡했던 리크루팅,
+          <span>복잡했던 </span>
+          <span>리크루팅,</span>
           <br />
-          하루만에
-          <S.HightLight> 크루루.</S.HightLight>
+          <span>하루만에</span>
+          <span> 크루루.</span>
         </S.Catchphrase>
         <S.Supporting>
           번거로운 엑셀 작업은 이제 그만!

diff --git a/frontend/src/pages/Landing/style.ts b/frontend/src/pages/Landing/style.ts
@@ -19,6 +19,26 @@ const bounce = keyframes`
   }
 `;
 
+const fadeIn = keyframes`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+
+const fadeInUp = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
 const getBubblePosition = (index: number) => {
   const positions = [
     { top: '10%', right: '10%' },
@@ -64,12 +84,33 @@ const Catchphrase = styled.h1`
   font-weight: 900;
   font-size: 6.4rem;
   letter-spacing: -1px;
-`;
 
-const HightLight = styled.span`
-  background: linear-gradient(90deg, #aa2298 0%, #841b76 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  span {
+    opacity: 0;
+    display: inline-block;
+    animation: ${fadeIn} 0.5s ease-in-out forwards;
+    white-space: pre-wrap;
+  }
+
+  span:nth-child(1) {
+    animation-delay: 0s;
+  }
+
+  span:nth-child(2) {
+    animation-delay: 0.1s;
+  }
+
+  span:nth-child(4) {
+    animation-delay: 0.2s;
+  }
+
+  span:nth-child(5) {
+    animation-delay: 0.3s;
+
+    background: linear-gradient(90deg, #aa2298 0%, #841b76 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
 `;
 
 const Supporting = styled.p`
@@ -78,13 +119,21 @@ const Supporting = styled.p`
   line-height: 1.4;
 
   color: ${({ theme }) => theme.baseColors.grayscale[700]};
+
+  opacity: 0;
+  animation: ${fadeInUp} 0.5s ease-in-out forwards;
+  animation-delay: 0.6s;
 `;
 
 const CtaButtons = styled.div`
   display: flex;
   align-items: center;
   gap: 1.5rem;
 
+  opacity: 0;
+  animation: ${fadeInUp} 0.5s ease-in-out forwards;
+  animation-delay: 0.6s;
+
   & > button {
     ${dropdownShadow}
   }
@@ -96,6 +145,10 @@ const MainImg = styled.img`
   position: absolute;
   bottom: -18rem;
   z-index: 0;
+
+  opacity: 0;
+  animation: ${fadeInUp} 0.5s ease-in-out forwards;
+  animation-delay: 0.6s;
 `;
 
 const ScrollDownArea = styled.div`
@@ -109,15 +162,6 @@ const ScrollDownArea = styled.div`
   position: absolute;
   bottom: -10vh;
 
-  background: linear-gradient(
-    0deg,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(246, 228, 243, 0.8) 20%,
-    rgba(243, 217, 238, 0.9) 50%,
-    rgba(247, 229, 243, 0.8) 80%,
-    rgba(255, 255, 255, 0) 100%
-  );
-
   & > svg {
     display: block;
     position: relative;
@@ -342,7 +386,6 @@ const S = {
   Container,
   MainSection,
   Catchphrase,
-  HightLight,
   Supporting,
   CtaButtons,
   MainImg,