# 📦 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' }
};
```