test

resources/js/app.js

@@ -55,35 +55,42 @@ const countdownTimer = setInterval(() => {
 $(function() {
     var partLeftPos = 0;
     var partRightPos = 0;
-    
+    var scrollTimeout;
+
+    function debounceScroll() {
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(function() {
+            var distance = $(window).scrollTop() * 2;
+            var left = partLeftPos - distance;
+            var right = partRightPos - distance;
+
+            $('.left').css('left', left + "px");
+            $('.right').css('right', right + "px");
+
+            // Calculate boundaries
+            var leftPartRightEdge = $('.left').offset().left + $('.left').outerWidth();
+
+            // Check if both parts are completely off-screen
+            var isLeftOffScreen = leftPartRightEdge <= 0;
+
+            // Toggle visibility and z-index
+            if (isLeftOffScreen && left < 0) {
+                $('.parent').removeClass(['z-30']);
+            } else {
+                $('.parent').addClass(['z-30']);
+            }
+        }, 100); // Adjust debounce delay as needed (in milliseconds)
+    }
+
     $(window).scroll(function(event) {
-        var distance = $(this).scrollTop() * 2;
-        var left = partLeftPos - distance;
-        var right = partRightPos - distance;
-        
-        $('.left').css('left', left + "px");
-        $('.right').css('right', right + "px");
-
-        // Calculate boundaries
-        var leftPartRightEdge = $('.left').offset().left + $('.left').outerWidth();
-
-        // Check if both parts are completely off-screen
-        var isLeftOffScreen = leftPartRightEdge <= 0;
-
-        // Toggle visibility and z-index
-        if (isLeftOffScreen && left < 0) {
-            $('.parent').removeClass(['z-30']);
-        } else {
-            $('.parent').addClass(['z-30']);
-        }
+        debounceScroll();
     });
 
     // Initially check visibility on page load
     $(window).trigger('scroll');
-
-    
 });
 
+
 document.addEventListener('click', function () {
     setTimeout(function () {
         document.getElementById('petalOverlay').style.display = 'block';