Parallax (css only)

Erlebe eine faszinierende Dimension des Webdesigns mit unserem Parallax-Experiment. Die Seite bietet nicht nur visuelle Tiefe, sondern transportiert dich auch durch den Bildschirm. Entdecke, wie der Hintergrund sanft mit dem Inhalt interagiert, während du durch inspirierenden Text gleitest. Tauche ein, spüre den Effekt, und erlebe eine neue Ebene der Webästhetik – einfach, mit reinem CSS.

Einfache Parallax-Webseite

Dieser CSS-Code erstellt eine einfache Parallax-Webseite mit einem Hintergrundbild, das sich während des Scrollens langsamer bewegt als der restliche Inhalt. Hier ist eine kurze Erklärung für jeden Abschnitt:

Reset für body und html:

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

Setzt den margin und padding für body und html auf 0 und stellt sicher, dass die Höhe des gesamten Viewports (height: 100%;) genutzt wird.

Styling für den Hauptinhalt:

main div {
  margin: auto;
  margin-top: 2rem;
  max-width: 1024px;
}

Zentriert und begrenzt den Hauptinhalt auf eine maximale Breite von 1024 Pixeln mit einem oberen Abstand von 2 Rem.

Parallax-Container mit 3D-Perspektive:

.parallax-container {
  height: 100vh;
  perspective: 1px;
}

Erstellt einen Container für den Parallax-Effekt mit einer Höhe von 100% des Viewports und einer 3D-Perspektive von 1 Pixel.

Parallax-Hintergrund-Layer:

.parallax-layer {
  background: url("./images/background.webp") center/cover no-repeat fixed;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

Erzeugt den Hintergrund-Layer mit dem Parallax-Effekt. Das Hintergrundbild wird zentriert, skaliert (cover), nicht wiederholt (no-repeat) und fixiert (fixed). Der Layer wird über z-index: -1; hinter den anderen Inhaltselementen platziert.

Inhaltselement mit erhöhtem Z-Index:

.parallax-content {
  z-index: 1;
  color: #fff;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  height: 100vh;
}

Stellt den Inhaltselement mit erhöhtem Z-Index dar, um über dem Hintergrund-Layer zu erscheinen. Der Inhalt ist weiß (#fff), wird zentriert und vertikal zentriert und nimmt die gesamte Höhe des Viewports ein (height: 100vh;). Der erhöhte Z-Index (1) sorgt dafür, dass der Inhalt über dem Hintergrund-Layer liegt.

HTML-Dokument

Dieses HTML-Dokument erstellt eine Seite mit einem Parallax-Effekt im Kopfbereich und einem Hauptinhalt mit mehreren Abschnitten. Beachte, dass du den Inhalt in den <div>-Elementen mit Dummy-Text ersetzen kannst. Der Parallax-Effekt wird durch das Zusammenspiel von HTML und CSS erreicht, wie du es zuvor in deinem CSS-Code festgelegt hast. Stelle sicher, dass das externe Stylesheet korrekt eingebunden ist und das Hintergrundbild im Pfad "assets/images/background.webp" vorhanden ist.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta-Tags für Zeichensatz und Ansichtseinstellungen -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Einbindung des externen Stylesheets -->
    <link rel="stylesheet" href="assets/style.css" />
    
    <!-- Seitentitel -->
    <title>Parallax mit reinem CSS</title>
  </head>
  <body>
    <!-- Parallax-Container -->
    <div class="parallax-container">
      <!-- Parallax-Hintergrund-Layer -->
      <div class="parallax-layer"></div>
      
      <!-- Inhaltselement mit erhöhtem Z-Index -->
      <div class="parallax-content">
        <!-- Überschrift und Textinhalt -->
        <h1>Parallax-Effekt</h1>
        <p>Ein einfaches Beispiel für Parallax mit reinem CSS</p>
      </div>
    </div>

    <!-- Hauptinhalt im main-Element -->
    <main>
      <!-- Dummy-Textabschnitte -->
      <div>
        <!-- Dummy-Textabschnitt 1 -->
        <!-- Füge hier deinen Inhalt ein -->
      </div>
      
      <div>
        <!-- Dummy-Textabschnitt 2 -->
        <!-- Füge hier deinen Inhalt ein -->
      </div>
      
      <div>
        <!-- Dummy-Textabschnitt 3 -->
        <!-- Füge hier deinen Inhalt ein -->
      </div>
    </main>
  </body>
</html>

1.mp4 15.3 MB

Meld dich an und schreibe ein Kommentar