chore: complete update

2025-07-17 16:24:20 +02:00
parent 899227b0a4
commit 64a7051137
1300 changed files with 85570 additions and 2756 deletions
--- a/resources/js/docs/SCROLLER.md
+++ b/resources/js/docs/SCROLLER.md
@@ -0,0 +1,115 @@
+# 📦 Scroll-Module – Anwendung und Integration
+
+Dieses Projekt enthält mehrere leichtgewichtige JavaScript-Module zur Gestaltung interaktiver Scroll-Erlebnisse.
+
+## 🔧 Modulübersicht
+
+| Modul            | Funktion                            |
+|------------------|-------------------------------------|
+| `scroll-timeline` | Zustandswechsel bei Scrollschritten |
+| `parallax`        | Parallax-Scrolling-Effekte          |
+| `sticky-steps`    | Scrollbasierte Sticky-Kapitel       |
+
+---
+
+## 1️⃣ scroll-timeline
+
+### 📄 Verwendung
+```html
+<section data-scroll-step="1">Intro</section>
+<section data-scroll-step="2">Chart</section>
+<section data-scroll-step="3">Zitat</section>
+```
+
+### ⚙️ Konfiguration
+```js
+init({
+  attribute: 'data-scroll-step', // Attributname
+  triggerPoint: 0.4,             // Auslösehöhe (in % der Viewporthöhe)
+  once: false                    // true = nur einmal triggern
+});
+```
+
+### 🎯 Callbacks (in steps.js)
+```js
+export const scrollSteps = {
+  onEnter(index, el) {
+    // Element wird aktiv
+  },
+  onLeave(index, el) {
+    // Element verlässt Fokus (wenn once = false)
+  }
+};
+```
+
+---
+
+## 2️⃣ parallax
+
+### 📄 Verwendung
+```html
+<img src="..." data-parallax data-parallax-speed="0.2">
+```
+
+### ⚙️ Konfiguration
+```js
+init({
+  selector: '[data-parallax]',       // Ziel-Selektor
+  speedAttr: 'data-parallax-speed', // Attribut für Geschwindigkeit
+  defaultSpeed: 0.5                  // Fallback-Geschwindigkeit
+});
+```
+
+### 💡 Hinweis
+Je niedriger die `speed`, desto "langsamer" scrollt das Element.
+
+---
+
+## 3️⃣ sticky-steps
+
+### 📄 Verwendung
+```html
+<div data-sticky-container>
+  <div data-sticky-step>Kapitel 1</div>
+  <div data-sticky-step>Kapitel 2</div>
+</div>
+```
+
+### ⚙️ Konfiguration
+```js
+init({
+  containerSelector: '[data-sticky-container]',
+  stepSelector: '[data-sticky-step]',
+  activeClass: 'is-sticky-active'
+});
+```
+
+### 🎨 CSS-Vorschlag
+```css
+[data-sticky-step] {
+  position: sticky;
+  top: 20vh;
+  opacity: 0.3;
+  transition: opacity 0.3s ease;
+}
+
+.is-sticky-active {
+  opacity: 1;
+}
+```
+
+---
+
+## 🚀 Integration in dein Framework
+
+- Jedes Modul exportiert eine `init()`-Funktion
+- Wird automatisch über `modules/index.js` geladen
+- Konfiguration erfolgt über `modules/config.js`
+
+```js
+export const moduleConfig = {
+  'scroll-timeline': { once: false },
+  'parallax': { defaultSpeed: 0.3 },
+  'sticky-steps': { activeClass: 'active' }
+};
+```