[Enhancement]: Add scroll-triggered animations for better UX

assets/css/scroll-animate.css

@@ -0,0 +1,28 @@
+/* Scroll-triggered animations */
+.scroll-hidden {
+  opacity: 0;
+  transform: translateY(40px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.scroll-hidden.from-left {
+  transform: translateX(-60px);
+}
+
+.scroll-hidden.from-right {
+  transform: translateX(60px);
+}
+
+.scroll-hidden.scale-in {
+  transform: scale(0.85);
+}
+
+.scroll-visible {
+  opacity: 1 !important;
+  transform: translateY(0) translateX(0) scale(1) !important;
+}
+
+/* Stagger game cards */
+.project-item.scroll-hidden {
+  transition-delay: calc(var(--anim-order, 0) * 0.08s);
+}

assets/js/scroll-animate.js

@@ -0,0 +1,38 @@
+// Scroll-triggered animations using IntersectionObserver
+(function () {
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("scroll-visible");
+          observer.unobserve(entry.target);
+        }
+      });
+    },
+    { threshold: 0.15 }
+  );
+
+  function observeElements() {
+    // Static sections
+    document.querySelectorAll(".scroll-hidden").forEach((el) => observer.observe(el));
+
+    // Dynamically loaded game cards
+    const list = document.querySelector(".project-list");
+    if (list) {
+      const mo = new MutationObserver(() => {
+        list.querySelectorAll(".project-item:not(.scroll-hidden):not(.scroll-visible)").forEach((el, i) => {
+          el.classList.add("scroll-hidden");
+          el.style.setProperty("--anim-order", i % 12);
+          observer.observe(el);
+        });
+      });
+      mo.observe(list, { childList: true });
+    }
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", observeElements);
+  } else {
+    observeElements();
+  }
+})();

index.html

@@ -50,6 +50,7 @@
   <link rel="stylesheet" href="./assets/css/navbar.css">
   <link rel="stylesheet" href="./assets/css/gameCard.css">
   <link rel="stylesheet" href="./assets/css/cursor_transition.css">
+  <link rel="stylesheet" href="./assets/css/scroll-animate.css">
 
 
   <!--
@@ -245,7 +246,7 @@
 
 
   <!-- Contributors section -->
-  <div class="contributors" id="contributorslink">
+  <div class="contributors scroll-hidden" id="contributorslink">
     <h1 style="font-family: 'Agency FB', Times, serif; color: aqua;">Our Valuable Contributors</h1>
      <!-- display number of contributors-->
     <h2 id="total-contributors" style="text-align: center; font-family: 'Agency FB', Times, serif; color: aqua;"></h2> 
@@ -266,7 +267,7 @@ <h2 id="total-contributors" style="text-align: center; font-family: 'Agency FB',
   <!--
         FOOTER
   -->
-  <div class="abcd" id="footer">
+  <div class="abcd scroll-hidden" id="footer">
     <div>
       <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
@@ -403,6 +404,7 @@ <h3>Subscribe to our newsletter</h3>
   <script src="./assets/js/cursor_transition.js"></script>
   <script src="./assets/js/contributors.js"></script>
   <script src="./assets/js/background.js"></script>
+  <script src="./assets/js/scroll-animate.js"></script>