michaelschiemer/resources/js/docs/SCROLLER.md

📦 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

<section data-scroll-step="1">Intro</section>
<section data-scroll-step="2">Chart</section>
<section data-scroll-step="3">Zitat</section>

⚙️ Konfiguration

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)

export const scrollSteps = {
  onEnter(index, el) {
    // Element wird aktiv
  },
  onLeave(index, el) {
    // Element verlässt Fokus (wenn once = false)
  }
};

---

2️⃣ parallax

📄 Verwendung

<img src="..." data-parallax data-parallax-speed="0.2">

⚙️ Konfiguration

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

<div data-sticky-container>
  <div data-sticky-step>Kapitel 1</div>
  <div data-sticky-step>Kapitel 2</div>
</div>

⚙️ Konfiguration

init({
  containerSelector: '[data-sticky-container]',
  stepSelector: '[data-sticky-step]',
  activeClass: 'is-sticky-active'
});

🎨 CSS-Vorschlag

[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

export const moduleConfig = {
  'scroll-timeline': { once: false },
  'parallax': { defaultSpeed: 0.3 },
  'sticky-steps': { activeClass: 'active' }
};