Wie erreicht man mit CSS einen Parallax-Scrolling-Effekt?

Parallax-Scrolling ist ein Webdesign-Trend, bei dem sich der Hintergrundinhalt (also Bilder) langsamer als der Vordergrundinhalt beim Scrollen der Seite bewegt. Mit anderen Worten, es handelt sich um die Hintergrundbewegung beim Scrollen der Seite.

Hier sehen Sie eine einfache Methode, wie Sie den Parallax-Scrolling-Effekt mit CSS erreichen können:

1. Erstellen Sie zunächst ein HTML-Element, in das Sie Ihren Hintergrund setzen möchten:

```html

```

2. Wenden Sie in Ihrem CSS das Hintergrundbild auf Ihr Element an und setzen Sie die Hintergrundanhängeeigenschaft auf ‘fixed’ um einen einfachen Parallax-Effekt zu erzielen:

```css
.parallax { /* The image used */ background-image: url(“img_parallax.jpg”);

/* Set a specific height */ min-height: 500px; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } ```

Beachten Sie, dass dieser einfache Ansatz einige Nachteile hat:

- Auf einigen mobilen Plattformen funktioniert der ‘fixed’-Wert für ‘background-attachment’ nicht richtig.

- Dieser Effekt arbeitet mit der ganzen Seite, d.h. es ist schwierig, mehrere Parallax-Elemente auf der gleichen Seite zu haben.

Für komplexere und benutzerdefinierte Parallax-Effekte könnten Sie eine JavaScript-Bibliothek wie Parallax.js oder Rellax.js verwenden.