Ein Parallaxeneffekt ist, wenn der Hintergrundinhalt (in der Regel ein Bild) während eines Scroll-Vorgangs langsamer bewegt wird als der Vordergrundinhalt. Hier ist ein einfaches Beispiel, wie ein Parallaxeneffekt in CSS erstellt wird:
1. Zunächst müssen Sie die HTML-Struktur erstellen, zum Beispiel die folgende:
```html
```css
.parallax {
position: relative;
height: 500px;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(‘images/your-image.jpg’);
background-attachment: fixed;
background-size: cover;
}
.content {
position: relative;
z-index: 1;
}
```
In diesem Beispiel bleibt der Hintergrund bei einem Scroll-Vorgang fest, während der Inhaltsbereich normal scrollt, was den Parallaxeneffekt erzeugt.
Für komplexere Parallaxeneffekte ist möglicherweise JavaScript erforderlich, insbesondere wenn mehrere Ebenen von Inhalten mit unterschiedlichen Geschwindigkeiten verschoben werden sollen. Aber für einfache Anwendungen kann CSS allein ausreichend sein.
Bitte beachten: einige mobile Geräte unterstützen background-attachment: fixed nicht. Um dies zu umgehen, können Sie eine Mischung aus CSS und JavaScript verwenden.
