Parallax-Tutrorial mit HTML und CSS
In diesem Tutorial lernst du, wie du schnell und einfach einen Parallax-Effekt nur mit Hilfe von HTML und CSS für deine Webseite erstellen kannst.
Parallax-Effekt in HTML und CSS
Starten mit HTML
Zu Beginn baust du dein HTML-Grundgerüst folgendermaßen auf.
Nachdem du eine .html-Datei erstellt hast startest du wie gewohnt mit dem <!DOCTYPE html> und legst mit <html lang="en"> die Sprache auf Englisch fest.
Darauf folgen die Kinderelemente <head>, <body> und <main>. Den <footer> lassen wir bewusst raus, da er für das Tutorial nicht notwendig ist.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<main>
</main>
</body>
</html>Im head wird das CSS-Stylesheet verknüpft(<link>), der Zeichensatz definiert, die größe des Kontents und die Skalierung festgelegt(<meta>).
Das Ende des head bildet der Titel, in diesem Fall "Parallax".
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parallax</title>
</head>Im main-Abschnitt des body spezifizierst du die Klassen der Überschriften.
Mit no-parallax werden die sich nicht bewegenden Objekte klassifiziert. Während unter parallax die sich bewegenden Objekte aufgeführt werden.
Damit ist das HTML-Dokument fertig und du kannst es mit </html> schließen.
<body>
<main>
<section class="no-parallax">
<h1>Tutorial</h1>
</section>
<section class="parallax background">
<h1>
Von Paul, Simon und Louis
</h1>
</section>
<section class="no-parallax">
<h1>Parallax</h1>
</section>
</main>
</body>
</html>So sollte das finale HTML-Gerüst aussehen.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parallax</title>
</head>
<body>
<main>
<section class="no-parallax">
<h1>Tutorial</h1>
</section>
<section class="parallax bg">
<h1>
Von Paul, Simon und Louis
</h1>
</section>
<section class="no-parallax">
<h1>Parallax</h1>
</section>
</main>
</body>
</html>Das Grundgerüst wird im Browser folgend dargestellt (Hier in Chrome).
CSS-Stylesheet
Beim erstellen der CSS-Datei ist es wichtig, dass du den Namen "style.css" verwendest und diese sich im selben Ordner wie die .html-Datei befindet, um die Verknüpfung zueinander herzustellen.
Um die Webseite flächendeckend mit dem Inhalt zu füllen, setzt du margin im body auf 0.
Im Bereich main definierst du mit den Deklarationen height, overflow-x, overflow-y und perspective die ersten Eigenschaften des Parallax-Effektes.
Bei height wird die ausgefüllte Höhe der Seite festgelegt. Hier stolperst du schnell über die Einheit "vh". Dabei entspricht 1vh 1% der Höhe des Viewports. Somit entsprechen 100vh 100% des Viewports.
Mit den overflow-x und -y Anweisungen wird bei zu viel Content innerhalb der Box festgelegt, ob man den Inhalt, durch scrollen komplett (auto) oder abgeschnitten bzw. versteckt (hidden) angezeigt bekommt. Das X steht hier für die horizontale Richtung des Bildschirms und Y für die Vertikale.
Perspektive verleiht einem Element einen 3D-Raum, indem der Abstand zwischen der z-Ebene und dem Benutzer beeinflusst wird.
body {
margin: 0;
}
main {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}Im Bereich section wird ein Überlappen der einzelnen Boxen durch den transform-style: preserve-3d gewährleistet.
Mit position: relative liegt die Position immer relativ zu ihrem ursprünglichen Platz im HTML-Dokument und man kann das Element mit top, bottom, left und right ausrichten, die Lücke im Textfluss bleibt allerdings bestehen.
In diesem Fall beschreibt height die Höhe der 3 mit section definierten Boxen.
Mit der Deklaration display: flex wird die Positionierung der Elemente in Zeilen bzw. Spalten eingeteilt. Der freie Raum wird mit justify-content und align-items verteilt. Center steht hierbei für die Zentrierung der Elemente.
Durch color gibst du der Typografie in den section-Abschnitten seine Farbe.
section {
transform-style: preserve-3d;
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
}Im Bereich no-parallax bestimmst du für die beiden Boxen, die keinen Parallax-Effekt aufweisen, die Hintergrundfarbe (background-color), sowie den z-index. Der z-index beschreibt die Lage der Boxen auf der Z-Achse. Je höher der Wert, desto weiter vorne liegt die Box.
.no-parallax {
background-color: #000000;
z-index: 999;
}Die Überschriften h1 definierst du in section h1 anhand von text-align, font-size, font-family und width.
section h1 {
text-align: center;
font-size: 2rem;
font-family: sans-serif;
width: 60%;
}Mit dem Pseudoelement ::after, welches für die Gestaltung im CSS-Layout von Bedeutung ist, allerdings im HTML-Markup nicht auftaucht, legst du weitere Bedingungen für das Parallax-Hintergrundbild fest.
Hier muss die Deklaration content hineingeschrieben werden, benötigt aber keinen Wert. Somit schreibst du hier als Platzhalter ' '.
Durch position: absolute wird das Element aus dem Elementfluss genommen und kann mit top, right, bottom und left unabhängig auf dem Bildschirm positioniert werden.
transform: translateZ(-1px) verschiebt das Parallax-Hintergrundbild um den Wert -1px auf der Z-Achse und scale(1.5) streckt das Bild um den Wert 1.5.
Die Deklaration background-size stellst du auf 100% und den z-index auf -1, da das Bild somit immer auf der untersten Ebene liegt.
.parallax::after {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}Das Pseudoelement .background::after verhält sich gleich wie das vorher oben kennengelernte ::after. Anstelle des content gibt es hier allerdings einen background. In diesen wird die URL des Bildes eingebettet und durch die Deklaration background-size: cover die gesamte Box ausgefüllt.
Mit @media screen and (min-width: 768px) fragt der Browser nach der Auflösung des Monitors bzw. des Browserfensters. Sollten hier mehr als 768px vorhanden sein, wird die Schriftgröße der Überschriften h1, von 2 auf 4rem umgestellt um bessere Lesbarkeit zu gewährleisten.
.background::after {
background: url("Test_Bild.jpeg");
background-size: cover;
}
@media screen and (min-width: 768px) {
section h1 {
font-size: 4rem;
}
}So sieht der gesamte CSS-Code aus.
body {
margin: 0;
}
main {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
section{
transform-style: preserve-3d;
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.no-parallax {
background: black;
z-index: 999;
}
section h1 {
text-align: center;
font-size: 2rem;
font-family: sans-serif;
width: 60%;
}
.parallax::after {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.background::after {
background: url("Test_Bild1.jpeg");
background-size: cover;
}
@media screen and (min-width: 768px) {
section h1 {
font-size: 4rem;
}
}Wir sind nun am Ende des Tutorials angekommen.
Den finalen Code findest du im Download.
Wir hoffen wir konnten dir weiterhelfen und wünschen dir viel Erfolg beim Nachmachen!
Tutorial-Dateien herunterladen
Quellen:
Code: https://alvarotrigo.com/blog/how-to-create-a-parallax-effect-with-css-only/
Recherche: https://www.w3schools.com/
https://developer.mozilla.org/en-US/
