[Feat] #5 - Add Header animation

페이지 로드 후 바로 실행되는 h1 슬라이드 애니메이션
likelion11-kangwon · Apr 15, 2023 · f75a67c · f75a67c
1 parent 0f460e4
commit f75a67c
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 5 deletions.
diff --git a/WarmUpProject/src/JeongDayeon.js b/WarmUpProject/src/JeongDayeon.js
@@ -25,12 +25,10 @@ function Profile(){
   return (
     <div className="content" id="profile">
       <header>
-        {/* 캐로셀 테스트용
-        <img src="images/headimgtest.png"> */}
         <h1 className="jdy_h1">
-            안녕하세요
-            <br/>이것저것 도전 중!
-            <br/><span className="colored_text">정다연</span>입니다.
+            <span className='line'>안녕하세요</span>
+            <span className='line'>이것저것 도전 중!</span>
+            <span className='line'><span className="colored_text">정다연</span>입니다.</span>
         </h1>
         <div className="article">
             <p className="small_font">

diff --git a/WarmUpProject/src/styles/jdy.css b/WarmUpProject/src/styles/jdy.css
@@ -9,6 +9,10 @@
 .jdy_h1{
     font-size:48px;
 }
+.jdy_h1 .line::after{
+    content: "\A";
+    white-space: pre;
+}
 .jdy_h2{
     font-size:32px;
     color:var(--main-c);
@@ -25,6 +29,39 @@
     line-height: 110%;
 }
 
+/* 헤더 애니메이션 */
+.jdy_h1 .line{
+    white-space: nowrap;
+}
+.jdy_h1 .line:nth-child(1){
+    animation-duration: 3s;
+    animation-delay: 0.1s;
+    animation-name: slidein;
+}
+.jdy_h1 .line:nth-child(2){
+    animation-duration: 3s;
+    animation-delay: 0.4s;
+    animation-name: slidein;
+}
+.jdy_h1 .line:nth-child(3){
+    animation-duration: 3s;
+    animation-delay: 0.7s;
+    animation-name: slidein;
+}
+@keyframes slidein {
+    from {
+        margin-left: 100%;
+        width: 300%;
+        opacity: 0;
+    }
+
+    to {
+        margin-left: 0%;
+        width: 100%;
+        opacity: 1;
+    }   
+}
+
 /* 프로젝트 카드 css */
 #projects ul{
     list-style-type:none;