add animation to section 1

index.html

@@ -42,35 +42,38 @@
         <!-- Logos -->
         <div class="flex justify-center mb-3 items-center gap-[53px]">
           <img
+            id="drmcitc-logo"
             src="./public/DITC_logo.png"
             alt="DRMC IT Club Logo"
-            class="line-block h-[65px]"
+            class="line-block h-[65px] fadein"
             draggable="false"
             loading="lazy"
           />
           <img
+            id="drmc-logo"
             src="./public/Drmc_logo.png"
             alt="Dhaka Residential Model College
           Logo"
-            class="line-block h-[90px]"
+            class="line-block h-[90px] fadein"
             draggable="false"
             loading="lazy"
           />
         </div>
         <!-- Club Name -->
-        <div class="block text-center font-bebasneue text-[64px] ditc">
+        <div class="block text-center font-bebasneue text-[64px] ditc fadein">
           DRMC IT CLUB
         </div>
         <!-- Presents Text -->
-        <div class="presents block text-center text-xl text-green3">
+        <div class="presents block text-center text-xl text-green3 slideup">
           presents
         </div>
         <!-- Grant Logo -->
         <img
+          id="sjij-logo"
           src="./public/sjij-logo.svg"
           alt="Sheikh Jamal Innovation Grant
         Logo"
-          class="block md:h-[172px]"
+          class="block md:h-[172px] scaleup"
           draggable="false"
           loading="lazy"
         />
@@ -378,6 +381,36 @@
       }
     </script>
 
+    <!-- Image animation loading script -->
+    <script>
+      let imagesLoaded = 0;
+      const totalImages = 3; // Number of images to wait for
+      const logo1 = document.getElementById("drmcitc-logo");
+      const logo2 = document.getElementById("drmc-logo");
+      const logo3 = document.getElementById("sjig-logo");
+
+      function imageLoaded() {
+        imagesLoaded++;
+        if (imagesLoaded === totalImages) {
+          // Make the logo visible and start the animation
+          logo1.classList.add("logo-visible");
+          logo2.classList.add("logo-visible");
+          logo3.classList.add("logo-visible");
+        }
+      }
+
+      // Attach load event listeners to images
+      document
+        .getElementById("drmcitc-logo")
+        .addEventListener("load", imageLoaded);
+      document
+        .getElementById("drmc-logo")
+        .addEventListener("load", imageLoaded);
+      document
+        .getElementById("sjij-logo")
+        .addEventListener("load", imageLoaded);
+    </script>
+
     <script>
       // Function to load the cursor script
       function loadCursorScript() {

output.css

@@ -578,6 +578,10 @@ video {
   }
 }
 
+.visible {
+  visibility: visible;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -1023,6 +1027,62 @@ body {
   }
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.fadein {
+  animation: fadeIn 1s ease-in forwards;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slideup {
+  animation: slideUp 0.8s ease-in forwards;
+}
+
+@keyframes scaleUp {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.scaleup {
+  animation: scaleUp 1s ease-in forwards;
+}
+
+#drmcitc-logo,
+#drmc-logo,
+#sjig-logo {
+  opacity: 0;
+}
+
+.logo-visible {
+  opacity: 1;
+}
+
 .ditc {
   letter-spacing: -0.64px;
 }
@@ -1047,7 +1107,7 @@ body {
 }
 
 #apply:hover {
-  transition: all 0.2s ease-in-out !important;
+  transition: all 0.2s ease-in forwards-out !important;
   border: 1px solid #0c443b !important;
   background: #0c443b !important;
   box-shadow: 0px 0px 7.6px 0px #061d20 inset !important;
@@ -1118,11 +1178,11 @@ nav {
   background-color: var(--text);
   display: block;
   margin: 7px auto;
-  transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in forwards-out;
 }
 
 .hamburger-active {
-  transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in forwards-out;
   transition-delay: 0.6s;
   transform: rotate(45deg);
 }
@@ -1155,7 +1215,7 @@ nav {
   height: 100vh;
   padding: 20% 0;
   background: rgba(255, 255, 255);
-  transition: all 0.5s ease-in;
+  transition: all 0.5s ease-in forwards;
   z-index: 2;
 }
 

style.css

@@ -36,6 +36,59 @@ body {
   }
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fadein {
+  animation: fadeIn 1s ease-in forwards;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slideup {
+  animation: slideUp 0.8s ease-in forwards;
+}
+
+@keyframes scaleUp {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.scaleup {
+  animation: scaleUp 1s ease-in forwards;
+}
+
+#drmcitc-logo,
+#drmc-logo,
+#sjig-logo {
+  opacity: 0;
+}
+
+.logo-visible {
+  opacity: 1;
+}
+
 .ditc {
   letter-spacing: -0.64px;
 }
@@ -60,7 +113,7 @@ body {
 }
 
 #apply:hover {
-  transition: all 0.2s ease-in-out !important;
+  transition: all 0.2s ease-in forwards-out !important;
   border: 1px solid #0c443b !important;
   background: #0c443b !important;
   box-shadow: 0px 0px 7.6px 0px #061d20 inset !important;
@@ -128,11 +181,11 @@ nav {
   background-color: var(--text);
   display: block;
   margin: 7px auto;
-  transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in forwards-out;
 }
 
 .hamburger-active {
-  transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in forwards-out;
   transition-delay: 0.6s;
   transform: rotate(45deg);
 }
@@ -165,7 +218,7 @@ nav {
   height: 100vh;
   padding: 20% 0;
   background: rgba(255, 255, 255);
-  transition: all 0.5s ease-in;
+  transition: all 0.5s ease-in forwards;
   z-index: 2;
 }