fade animation

config.toml

@@ -125,8 +125,8 @@ defaultContentLanguage = "en"
   # Integrate Javascript files or stylesheets by adding the url to the external assets or by
   # linking local files with their path relative to the static folder, e.g. "css/styles.css"
   #
-  customCSS = []
-  customJS  = []
+  customCSS = "/fonts/css/fade.css"
+  customJS  = "/fonts/js/fade.js"
 
   # Toggle this option need to rebuild SCSS, requires extended version of Hugo
   #

static/fonts/css/fade.css

@@ -0,0 +1,9 @@
+.fade-in-hidden {
+    opacity: 0; /* Hidden by default */
+    transition: opacity 4s ease-in; /* Smooth fade-in over 4 seconds */
+  }
+
+  .fade-in-visible {
+    opacity: 1; /* Fully visible */
+  }
+

static/fonts/js/fade.js

@@ -0,0 +1,8 @@
+// Add this in your JavaScript file (e.g., `assets/js/main.js`) or inline
+document.addEventListener("DOMContentLoaded", function () {
+    const fadeInElement = document.getElementById("fade-in-element");
+
+    // Add the 'fade-in-visible' class to start the fade-in effect
+    fadeInElement.classList.add("fade-in-visible");
+  });
+