(refactor): improved homepage hello text in out animation

htdocs/assets/extra-style.css

@@ -1,3 +1,5 @@
+/* --- Scrollbar Styling--- */
+
 ::-webkit-scrollbar {
     width: 4px;
   }
@@ -14,7 +16,38 @@ background: rgba(56, 189, 248, 0.30);
 background: #38BDF8;
 }
 
+/* --- Hello Container Styling --- */
 
+#helloContainer {
+    position: relative;
+}
+
+.slideUpFade {
+    display: inline-block;
+    opacity: 0;
+    transform: translateY(0px);
+    animation: slideUpFade 4s ease-in-out;
+    animation-fill-mode: forwards;
+}
+
+@keyframes slideUpFade {
+    0% {
+        opacity: 0;
+    }
+    30% {
+        opacity: 1;
+    }
+    70% {
+        opacity: 0.9;
+        transform: translateY(0);
+    }
+    100% {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+}
+
+/* --- Scrool Down to Explore Btn Styling --- */
 
 @keyframes scroll {
     0% {
@@ -44,6 +77,8 @@ background: #38BDF8;
     animation: slide-up 0.5s ease-in-out;
 }
 
+/* --- Hover Animated Container Styling --- */
+
 .hoverAnimatedContainer:hover::before {
     opacity: 1;
 }
@@ -77,7 +112,7 @@ background: #38BDF8;
     fill: red;
 } */
 
-/* --- floatingbar styling --- */
+/* --- Floating Bar Styling --- */
 
 .floatingbar-slide-down {
     transform: translateY(20vh);

htdocs/assets/js/core-animation.js

@@ -4,18 +4,20 @@ function animate_hello() {
     const textContainer = document.getElementById("helloContainer");
 
     let currentIndex = 0;
+
     function animateText() {
-        textContainer.textContent = texts[currentIndex];
+        textContainer.innerHTML = texts[currentIndex].split(' ').map(word => `<span class="slideUpFade">${word}</span>`).join(' ');
         currentIndex = (currentIndex + 1) % texts.length;
 
         setTimeout(() => {
             animateText();
-        }, 3000);
+        }, 4000);
     }
+
     animateText();
 }
 
-if(document.getElementById("helloContainer")) {
+if (document.getElementById("helloContainer")) {
     animate_hello();
 }