diff --git a/scripts/pages/user/main.js b/scripts/pages/user/main.js
index cdc0b9d..ddd7b23 100644
--- a/scripts/pages/user/main.js
+++ b/scripts/pages/user/main.js
@@ -3,15 +3,39 @@ document.addEventListener('DOMContentLoaded', function () {
     var h1 = document.querySelector('.user-index-h1');
     var h2 = document.querySelector('.user-index-h2');
 
+    // Function to check if an element is in the viewport
+    function isInViewport(element) {
+        var rect = element.getBoundingClientRect();
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+        );
+    }
+
     // Function to handle the scroll event
     function handleScroll() {
-        // Calculate the opacity based on the scroll position
-        var scrollFraction = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
-        var opacity = 1 - (scrollFraction*3.5);
+        if (isInViewport(headerText)) {
+            // Calculate the fade-in effect based on the scroll position
+            var scrollFraction = window.scrollY / window.innerHeight;
+            var translateX = -20 * (1 - scrollFraction);
+            var opacity = 1 - scrollFraction;
 
-        // Apply the opacity to the elements
-        h1.style.opacity = opacity;
-        h2.style.opacity = opacity;
+            // Apply the fade-in effect to the elements
+            h1.style.transform = 'translateX(' + translateX + 'px)';
+            h1.style.opacity = opacity;
+
+            h2.style.transform = 'translateX(' + translateX + 'px)';
+            h2.style.opacity = opacity;
+        } else {
+            // Reset styles if elements are out of the viewport
+            h1.style.transform = 'translateX(-20px)';
+            h1.style.opacity = 0;
+
+            h2.style.transform = 'translateX(-20px)';
+            h2.style.opacity = 0;
+        }
     }
 
     // Attach the handleScroll function to the scroll event