ソースを参照

testing bounce

master
farhan 4ヶ月前
コミット
b817c1c3c5
1個のファイルの変更32行の追加7行の削除
  1. 32
    7
      resources/js/app.js

+ 32
- 7
resources/js/app.js ファイルの表示

@@ -55,9 +55,12 @@ const countdownTimer = setInterval(() => {
55 55
 $(function() {
56 56
     var partLeftPos = 0;
57 57
     var partRightPos = 0;
58
+    var isScrolling = false;
59
+    var lastScrollTop = 0;
58 60
 
59 61
     function updatePositions() {
60
-        var distance = $(window).scrollTop() * 2;
62
+        var scrollTop = $(window).scrollTop();
63
+        var distance = scrollTop * 2;
61 64
         var left = partLeftPos - distance;
62 65
         var right = partRightPos - distance;
63 66
 
@@ -81,16 +84,38 @@ $(function() {
81 84
     // Initial positions update
82 85
     updatePositions();
83 86
 
84
-    // Listen to scroll events using requestAnimationFrame for smooth animation
85
-    var ticking = false;
86
-    $(window).scroll(function() {
87
-        if (!ticking) {
87
+    // Debounce function for scroll events
88
+    function debounce(func, delay) {
89
+        var timeout;
90
+        return function() {
91
+            var context = this;
92
+            var args = arguments;
93
+            var later = function() {
94
+                timeout = null;
95
+                func.apply(context, args);
96
+            };
97
+            clearTimeout(timeout);
98
+            timeout = setTimeout(later, delay);
99
+        };
100
+    }
101
+
102
+    // Update positions on scroll using requestAnimationFrame for smoother animation
103
+    function scrollHandler() {
104
+        if (!isScrolling) {
88 105
             window.requestAnimationFrame(function() {
89 106
                 updatePositions();
90
-                ticking = false;
107
+                isScrolling = false;
91 108
             });
92 109
         }
93
-        ticking = true;
110
+        isScrolling = true;
111
+    }
112
+
113
+    // Listen to scroll events and debounce them for better performance
114
+    $(window).scroll(debounce(scrollHandler, 20));
115
+
116
+    // Handle window resize to recalculate positions if needed
117
+    $(window).resize(function() {
118
+        updatePositions();
94 119
     });
95 120
 });
96 121
 

読み込み中…
キャンセル
保存