Add scroll

scroll

@@ -0,0 +1,72 @@
+class DelayedScroll {
+  constructor() {
+    this.initialized = false;
+    this.maxScroll = window.innerHeight * 2; // 最多监听2屏的高度
+    this.init();
+  }
+  
+  init() {
+    if (this.initialized) return;
+    
+    let ticking = false;
+    
+    const handleScroll = () => {
+      if (!ticking) {
+        requestAnimationFrame(() => {
+          const scrollY = window.scrollY;
+          
+          // 只在首屏范围内应用效果
+          if (scrollY <= this.maxScroll) {
+            this.updateElements(scrollY);
+          } else {
+            // 超出范围时停止监听
+            window.removeEventListener('scroll', scrollHandler);
+            this.cleanup();
+          }
+          
+          ticking = false;
+        });
+        ticking = true;
+      }
+    };
+    
+    // 使用节流的滚动监听
+    const scrollHandler = () => {
+      if (window.scrollY <= this.maxScroll) {
+        handleScroll();
+      }
+    };
+    
+    window.addEventListener('scroll', scrollHandler, { passive: true });
+    
+    // 初始执行一次
+    this.updateElements(window.scrollY);
+    
+    this.initialized = true;
+  }
+  
+  updateElements(scrollY) {
+    document.querySelectorAll('.delayed-element').forEach(element => {
+      const delayFactor = this.getDelayFactor(element);
+      const delay = scrollY * delayFactor;
+      element.style.setProperty('--scroll-delay', delay);
+    });
+  }
+  
+  getDelayFactor(element) {
+    return parseFloat(
+      getComputedStyle(element).getPropertyValue('--delay-factor') || 0.2
+    );
+  }
+  
+  cleanup() {
+    // 可选：移除transform，恢复原状
+    document.querySelectorAll('.delayed-element').forEach(element => {
+      element.style.removeProperty('--scroll-delay');
+      element.style.removeProperty('transform');
+    });
+  }
+}
+
+// 使用
+new DelayedScroll();