Das Erstellen einer Parallaxenseite in voller Breite mit Bootstrap erfordert die Verwendung von Hintergrundbildern, Positionierung und CSS3-Transformationen. So können Sie dies erreichen:

HTML-Struktur

1. Erstellen Sie eine grundlegende HTML-Struktur mit einem „Body“- und einem „Header“-Abschnitt:

```html

„

CSS-Stile

2. Fügen Sie Ihrer CSS-Datei die folgenden Stile hinzu:

„css

/* Hauptstile */

Körper {

Hintergrundfarbe:#000;

}

Kopfzeile {

Hintergrundbild:url("path/to/image1.jpg");

Hintergrundanhang:behoben;

Hintergrundgröße:Cover;

Hintergrundwiederholung:keine Wiederholung;

Höhe:100 Vh;

}

/* Parallaxenstile */

.parallax-container {

Position:relativ;

Höhe:100 Vh;

}

.parallax-layer {

Position:absolut;

oben:0;

links:0;

Breite:100 %;

Höhe:100 %;

}

.parallax-layer--image {

Hintergrundanhang:behoben;

Hintergrundgröße:Cover;

Hintergrundwiederholung:keine Wiederholung;

}

/* Parallaxeneffekte */

@media (maximale Breite:992 Pixel) {

.parallax-layer--image {

transform:Translate3d(0, 0, 0);

}

}

@media (min-width:992px) {

.parallax-layer--image {

transform:Translate3d(-50%, 0, 0);

}

}

„

Erklärung

- Der „Körper“ ist als Hintergrundfarbe auf Schwarz eingestellt.

- Der „Header“ hat ein festes Hintergrundbild, deckt die gesamte Höhe des Ansichtsfensters ab und weist keine Wiederholungen auf.

- Der „.parallax-container“ hat eine relative Position, sodass die untergeordneten Elemente darin absolut positioniert werden können.

- Die „.Parallax-Schicht“ ist absolut positioniert und bedeckt den gesamten Container.

- Das „.parallax-layer--image“ hat ein Hintergrundbild, ist fest, deckt die gesamte Ebene ab und weist keine Wiederholungen auf.

- Die Medienabfragen wenden Parallaxeneffekte basierend auf der Bildschirmbreite an. Bei kleineren Breiten (mobile Geräte) gibt es keinen Parallaxeneffekt, während sich die Hintergrundbilder bei größeren Breiten (größere Bildschirme) mit halber Scrollgeschwindigkeit bewegen, wodurch der Parallaxeneffekt entsteht.

Nutzung

3. Fügen Sie innerhalb des „Körpers“ nach Bedarf zusätzliche Abschnitte oder Inhalte hinzu und packen Sie sie in einen „.Parallax-Container“. Fügen Sie Hintergrundbilder für jeden Abschnitt als „.parallax-layer--image“ hinzu.

```html

„

Schlussfolgerung

Durch die Kombination fester Hintergrundbilder, Positionierung und CSS3-Transformationen haben Sie mit Bootstrap erfolgreich eine Parallaxenseite in voller Breite erstellt. Passen Sie CSS und Inhalte nach Bedarf an, um Ihr Parallax-Erlebnis individuell anzupassen.