Parallax

Entdecken Sie eine faszinierende Welt des Parallaxeneffekts. Tauchen Sie ein in die Tiefe dieses Beispiels und erleben Sie, wie Hintergrundbilder sanft auf Ihre Bildlaufbewegungen reagieren.

Basis-Code

Das gegebene HTML-Dokument repräsentiert eine einfache Webseite mit einem Parallaxeneffekt. Hier sind die Erklärungen für verschiedene Teile des Codes:

DOCTYPE-Deklaration:

<!DOCTYPE html>

Dieser Teil gibt die HTML-Version an, die das Dokument verwendet. In diesem Fall HTML5.

HTML-Starttag:

<html lang="de">

Hier wird der Beginn des HTML-Dokuments markiert, und die Sprache des Dokuments wird als Deutsch (de) angegeben.

Head-Bereich:

<head>
  <!-- Meta-Tags für Zeichensatz und Ansicht -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Titel der Webseite -->
  <title>Parallax Beispiel</title>
  <!-- Verknüpfung zur externen CSS-Datei -->
  <link rel="stylesheet" href="assets/style.css" />
</head>

<meta charset="UTF-8" />: Definiert den Zeichensatz als UTF-8.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Einstellungen für die mobile Ansicht.
<title>Parallax Beispiel</title>: Der Titel der Webseite, der im Browser-Tab angezeigt wird.
<link rel="stylesheet" href="assets/style.css" />: Verknüpft die externe CSS-Datei.

Body-Bereich:

<body>
  <!-- Parallax-Sektion mit einem H1-Titel und einem Absatz -->
  <div class="parallax">
    <h1>Parallax</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      Exercitationem, repellendus.
    </p>
  </div>
  <!-- Hauptinhalt der Webseite mit mehreren Abschnitten -->
  <main>
    <!-- Vier Abschnitte mit Dummy-Text -->
    <div> ... </div>
    <div> ... </div>
    <div> ... </div>
    <div> ... </div>
  </main>
  <!-- Verknüpfung zur externen JavaScript-Datei -->
  <script src="assets/parallax.js"></script>
</body>

<div class="parallax">: Ein Abschnitt, dem die Klasse "parallax" zugewiesen ist, die wahrscheinlich für den Parallaxeneffekt verwendet wird.
<main>: Ein HTML5-Element für den Hauptinhalt der Webseite.
<script src="assets/parallax.js"></script>: Verknüpfung zur externen JavaScript-Datei.

Dateien style.css

Die Dateien style.css und parallax.js in den "assets"-Ordnern enthalten den CSS-Code und den JavaScript-Code für das Styling und den Parallaxeneffekt der Webseite.

Globale Einstellungen für den Body:

body {
  margin: 0;
  padding: 0;
}

margin: 0;: Entfernt den äußeren Rand des Body-Elements.
padding: 0;: Entfernt den Innenabstand des Body-Elements.

Stilregeln für die Div-Elemente innerhalb des Main-Elements:

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

margin: auto;: Zentriert das Div-Element horizontal innerhalb seines übergeordneten Elements.
margin-top: 2rem;: Setzt einen oberen Abstand von 2 Rem (eine Einheit, die relativ zur Schriftgröße ist) für die Div-Elemente.
max-width: 1024px;: Setzt die maximale Breite der Div-Elemente auf 1024 Pixel.

Stilregeln für das Parallax-Element:

.parallax {
  background-image: url("background.jpg");
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

background-image: url("background.jpg");: Setzt das Hintergrundbild des Parallax-Elements auf "background.jpg".
background-size: cover;: Sorgt dafür, dass das Hintergrundbild den gesamten Container bedeckt.
background-attachment: fixed;: Fixiert das Hintergrundbild, um den Parallaxeneffekt zu erzeugen.
height: 100vh;: Setzt die Höhe des Parallax-Elements auf die volle Bildschirmhöhe.
display: flex;: Nutzt das Flexbox-Layout.
flex-direction: column;: Legt die Ausrichtung der Flexbox auf Spalten fest.
align-items: center;: Zentriert die Elemente horizontal in der Flexbox.
justify-content: center;: Zentriert die Elemente vertikal in der Flexbox.
color: white;: Setzt die Textfarbe auf Weiß.
font-size: 24px;: Setzt die Schriftgröße auf 24 Pixel.

Dateien parallax.js

Event-Listener für DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function () {

Der Code innerhalb dieser Funktion wird ausgeführt, wenn das DOM vollständig geladen wurde.

Holen der Elemente mit der Klasse "parallax":

const elements = document.getElementsByClassName("parallax");

Die Variable elements enthält eine NodeList aller Elemente mit der Klasse "parallax".

Funktion parallaxEffect:

function parallaxEffect(element, speed) {

Diese Funktion nimmt ein Element und eine Geschwindigkeitsparameter als Argumente.

Funktion height:

function height() {
  const initTop = element.offsetTop;
  const scrollTop = window.scrollY || window.pageYOffset;
  const roundedHeight = Math.round((initTop - scrollTop) * speed);
  return roundedHeight;
}

Berechnet die vertikale Position des Elements basierend auf der Scroll-Position und der angegebenen Geschwindigkeit.

Funktion updateBgPosition:

function updateBgPosition() {
  element.style.backgroundPosition = "50% " + height() + "px";
}

Aktualisiert die Hintergrundposition des Elements basierend auf der berechneten Höhe.

Aufruf von updateBgPosition:

updateBgPosition();

Ruft die Funktion updateBgPosition einmal auf, um die anfängliche Hintergrundposition zu setzen.

Event-Listener für Scroll- und Resize-Ereignisse:

window.addEventListener("scroll", updateBgPosition);
window.addEventListener("resize", updateBgPosition);

Bindet die Funktion updateBgPosition an die Scroll- und Resize-Ereignisse des Fensters.

Prüfung, ob Elemente mit der Klasse "parallax" existieren:

if (elements.length !== 0) {
  parallaxEffect(elements[0], 0.5); // Hier kann die Geschwindigkeit angepasst werden
}

}) // schliessende Klammer DOMContentLoaded

Überprüft, ob Elemente mit der Klasse "parallax" existieren, und ruft die Funktion parallaxEffect für das erste gefundene Element mit einer Geschwindigkeit von 0.5 auf. Die Geschwindigkeit kann je nach Bedarf angepasst werden.

1.mp4 23.2 MB

Meld dich an und schreibe ein Kommentar