chore: complete update

resources/js/modules/scroll-loop/index.js

@@ -0,0 +1,66 @@
+// modules/scroll-loop/index.js
+import { registerFrameTask } from '../../core/frameloop.js';
+
+export function init(config = {}) {
+    const elements = document.querySelectorAll('[data-scroll-loop]');
+
+    elements.forEach(el => {
+        const type = el.dataset.scrollType || 'translate';
+        if (type === 'translate' && el.children.length === 1) {
+            const clone = el.firstElementChild.cloneNode(true);
+            clone.setAttribute('aria-hidden', 'true');
+            el.appendChild(clone);
+        }
+    });
+
+    registerFrameTask('scroll-loop', () => {
+        const scrollY = window.scrollY;
+        const scrollX = window.scrollX;
+
+        elements.forEach(el => {
+            const factor = parseFloat(el.dataset.scrollSpeed || config.speed || 0.2);
+            const axis = el.dataset.scrollAxis || 'y';
+            const type = el.dataset.scrollType || 'translate';
+            const pause = el.dataset.loopPause === 'true';
+            const offsetStart = parseFloat(el.dataset.loopOffset || 0);
+            const limit = parseFloat(el.dataset.loopLimit || 0);
+
+            const input = axis === 'x' ? scrollX : scrollY;
+            if (limit && input > limit) return;
+            if (pause && (el.matches(':hover') || el.matches(':active'))) return;
+
+            const offset = (input + offsetStart) * factor;
+
+            switch (type) {
+                case 'translate': {
+                    const base = axis === 'x' ? el.offsetWidth : el.offsetHeight;
+                    const value = -(offset % base);
+                    const transform = axis === 'x' ? `translateX(${value}px)` : `translateY(${value}px)`;
+                    el.style.transform = transform;
+                    break;
+                }
+                case 'rotate': {
+                    const deg = offset % 360;
+                    el.style.transform = `rotate(${deg}deg)`;
+                    break;
+                }
+                case 'background': {
+                    const pos = offset % 100;
+                    if (axis === 'x') {
+                        el.style.backgroundPosition = `${pos}% center`;
+                    } else {
+                        el.style.backgroundPosition = `center ${pos}%`;
+                    }
+                    break;
+                }
+                case 'scale': {
+                    const scale = 1 + Math.sin(offset * 0.01) * 0.1;
+                    el.style.transform = `scale(${scale.toFixed(3)})`;
+                    break;
+                }
+                default:
+                    break;
+            }
+        });
+    }, { autoStart: true });
+}