Add entrance animation for links

RecyLife · Oct 11, 2024 · a411062 · a411062
1 parent 7bb3cda
commit a411062
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -17,12 +17,12 @@
         <h1 id="headerTitle" class="header-title">RecyTech</h1>
         <div class="header-separator"></div>
         <div id="headerLinks" class="header-links">
-            <p id="headerLink headerLinkProduct" class="header-link" onclick="smoothScroll('headerLinkProduct', 'product')">Notre produit</p>
-            <p id="headerLink headerLinkAbout" class="header-link" onclick="smoothScroll('headerLinkAbout', 'about')">A propos</p>
-            <p id="headerLink headerLinkTeam" class="header-link" onclick="smoothScroll('headerLinkTeam', 'team')">Team</p>
-            <p id="headerLink headerLinkContact" class="header-link" onclick="smoothScroll('headerLinkContact', 'contact')">Contact</p>
+            <p id="headerLinkProduct" class="header-link" onclick="smoothScroll('headerLinkProduct', 'product')">Notre produit</p>
+            <p id="headerLinkAbout" class="header-link" onclick="smoothScroll('headerLinkAbout', 'about')">À propos</p>
+            <p id="headerLinkTeam" class="header-link" onclick="smoothScroll('headerLinkTeam', 'team')">Équipe</p>
+            <p id="headerLinkContact" class="header-link" onclick="smoothScroll('headerLinkContact', 'contact')">Contact</p>
         </div>
-
+        
         <div class="hamburger-menu" id="hamburgerMenu">
             <div class="bar"></div>
             <div class="bar"></div>

diff --git a/styles/header.css b/styles/header.css
@@ -67,19 +67,6 @@
     gap: 20px;
     cursor: pointer;
     z-index: 2;
-    transition: opacity 0.5s ease;
-}
-
-.header-link:nth-child(2) {
-    transition-delay: 0.2s;
-}
-
-.header-link:nth-child(3) {
-    transition-delay: 0.4s;
-}
-
-.header-link:nth-child(4) {
-    transition-delay: 0.6s;
 }
 
 .header-links.is-hamburger-active {
@@ -91,30 +78,27 @@
     flex-direction: column;
     height: 80%;
     width: calc(100% - 47px);
-    opacity: 1;
 }
 
 .header-link {
     font-family: "Raleway-SemiBold";
     font-size: 20px;
     text-decoration: none;
     color: var(--text-color);
-    transition: opacity 0.2s;
+    opacity: 1; 
 }
 
 .header-link.is-hamburger-active {
     font-size: 28px;
-    opacity: 1;
 }
 
 .header-link:hover, .header-link:focus {
     color: #ffffffb4;
     outline: none;
 }
 
-.header-link-arrow {
-    transform: rotate(180deg);
-    display: none;
+.header-link.is-hamburger-active {
+    font-size: 28px;
 }
 
 .hamburger-menu {
@@ -159,15 +143,51 @@
 }
 
 @media screen and (max-width: 700px) {
-    .header-separator, .header-links {
+    .header-separator {
         display: none;
     }
 
+    .hamburger-menu {
+        display: flex;
+    }
+
+    .header-links {
+        display: flex;
+        position: absolute;
+        top: calc(50% + 50px);
+        left: 50%;
+        transform: translate(-50%, -50%);
+        flex-direction: column;
+        height: 80%;
+        width: calc(100% - 47px);
+        pointer-events: none; 
+    }
+
+    .header-links.is-hamburger-active {
+        pointer-events: auto; 
+    }
+
     .header-link {
         opacity: 0;
+        transition: opacity 0.5s ease-in-out;
+        transition-delay: 0s;
     }
 
-    .hamburger-menu {
-        display: flex;
+    .header-link.is-hamburger-active {
+        opacity: 1;
+    }
+
+    .header-links.is-hamburger-active .header-link:nth-child(1) {
+        transition-delay: 0s;
+    }
+    .header-links.is-hamburger-active .header-link:nth-child(2) {
+        transition-delay: 0.1s;
+    }
+    .header-links.is-hamburger-active .header-link:nth-child(3) {
+        transition-delay: 0.2s;
+    }
+    .header-links.is-hamburger-active .header-link:nth-child(4) {
+        transition-delay: 0.3s;
     }
 }
+