116 lines
2.4 KiB
Markdown
116 lines
2.4 KiB
Markdown
# 📦 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' }
|
||
};
|
||
```
|