Parallax-Effekt
In diesem Tutorial erklären wir dir, wie du den faszinierenden Parallax-Effekt in deine Webprojekte einsetzen kannst. Er erzeugt eine beeindruckende räumliche Tiefe und hilft dabei deine Webseite lebendiger denn je erscheinen zu lassen. Lerne Schritt für Schritt diese ansprechende Technik umzusetzen und deine Besucher zu begeistern.
Beispielvideo:
Was ist der Parallax-Effekt?
Bei dem Parallax-Effekt handelt es sich um eine visuelle Technik, bei welcher durch unterschiedliche Entfernung von Objekten sugeriert wird, weiter weg liegende Elemente bewegten sich langsamer, so entsteht eine dreidimensionale Illusion. Dies wird oft in Webdesign und Animationen eingesetzt, um Webseiten und Grafiken ansprechender, interaktiver und dynamischer zu gestalten. Beim Scrollen oder Bewegen der Maus wirken die Vorder- und Hintergrundebenen des Bildes oder der Webseite, als ob sie sich relativ zueinander bewegen, was einen interessanten räumlichen Effekt erzeugt.
Grundlagen: HMTL Gerüst erstellen
Als Basis für unsere Tutorial Webseite haben wir ein standart HTML Doctype erstellt, in welchem zunächst nur <html lang>, der <head> mit dem <title> und ein <body> mit unseren Überschriften definiert sind.
Falls du bei dem Erstellen eines Grundgerüsts noch Hilfe benötigst, klicke hier.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parallax</title>
</head>
<body>
<main>
<h1>Parallax</h1>
<h1>
Tutorial
</h1>
<h1>Von Nika, Indira und Kim</h1>
</main>
</body>
</html>Stylesheet erstellen
Der Parallax Effekt wird in dem Stylesheet, also in CSS erstellt. Lege dafür eine separate CSS-Datei (styles.css) an und definiere das Styling für die Parallax-Elemente. Stelle sicher, dass du die gewünschten Hintergrundbilder, Farben und Positionen festlegst:
body {
margin: 0;
height: auto;
font-family: sans-serif;
}
main {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}Wir starten im <body>, hier wird das Styling für den gesamten Seiteninhalt definiert. Die Margins (Abstände) des Seiteninhalts werden auf 0 gesetzt, und die Schriftart ist vorläufig als 'sans-serif' eingestellt.
Im <main> legen wir die Perspektive und die Scrolleigenschaften der Seite fest. Dieser Abschnitt definiert das Styling für das Hauptinhaltselement (oft der Hauptcontainer des Inhalts). Die Höhe height muss dabei ein fester Wert sein, damit der Effekt funktioniert. Sie ist in der Viewport Einheit angegeben und wird auf 100 gestellt, um die volle Höhe des Ansichtsfensters des Bildschirm zu decken (100 % der Bildschirmhöhe). Der Inhalt wird vertikal und horizontal gescrollt, wenn nötig.
Die perspective-Eigenschaft wird auf 2px festgelegt, um eine Parallaxe zu erzeugen, wenn Elemente in der Tiefe verschoben werden.
section{
transform-style: preserve-3d;
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
}section {}In diesem Abschnitt definieren wir das Styling für die Abschnitte auf der Webseite. Sie werden so eingestellt, dass sie die 3D-Darstellung beibehalten ('transform-style: preserve-3d;'). Die Abschnitte haben eine Höhe von 100vh, werden zentriert und enthalten weißen Text auf einem schwarzen Hintergrund. Die Textfarbe ist hierbei frei von dir wählbar.
.no-parallax {
background: black;
z-index: 999;
}no-parallax {} Hier legen wir das Styling für Elemente mit der Klasse "no-parallax" fest. Sie haben einen schwarzen Hintergrund (die Farbe vom Hintergrund sollte mit dem gewählten Bild übereinstimmen) und eine höhere Z-Ebene (z-index: 999), was bedeutet, dass sie über anderen Elementen angezeigt werden.
section h1 {
text-align: center;
font-size: 2rem;
width: 60%;
}section h1 {} Dieser Bereich definiert das Styling für die Überschrift (h1) in den Abschnitten. Die Schriftgröße haben wir auf 2rem und die Breite auf 60 % gesetzt.
.parallax::after {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.6);
background-size: cover;
z-index: -1;
backface-visibility: hidden;
}.parallax: : after {}Nun bestimmen wir die Stilregeln für das Pseudo-Element (::after) von Elementen mit der Klasse "parallax". Das Pseudo-Element wird dazu verwendet, einen Parallax-Effekt zu erzeugen, der dem Hauptinhaltselement einen tieferen räumlichen Eindruck verleiht.
content: ' ';: Dascontent-Attribut legt den Inhalt von::afterfest. Unser Element enthält keinen sichtbaren Text, deshalb ist es leer.position: absolute;: Das Pseudo-Element wird mit einer absoluten Positionierung platziert, das heißt es positioniert sich relativ zum gesammten Bildschirm bzw. dem Elternlement, welches die Klasse "parallax" hat.top: 0; right: 0; bottom: 0; left: 0;: Die Werte 0 für alle Seiten (top, right, bottom, left) bedeuten, dass es keine Abstände zwischen dem Pseudo-Element und den Rändern des übergeordneten Elements gibt.transform: translateZ(-1px) scale(1.6);: Hier haben wir eine 3D-Transformation angewendet, um den Parallax-Effekt zu erzeugen.::afterwird um -1 Pixel in der Z-Achse verschoben (in den Bildschirm hinein), was den Eindruck einer Tiefe erzeugt. Diescale(1.6)-Transformation vergrößert das Element um den Faktor 1,6.background-size: cover;: Des weiteren legen wir hier die Größe des Hintergrundbilds des Pseudo-Elements fest. Das Bild wird so skalliert, dass es ohne Verzerrungen den ganzen Hintergrung bedeckt.z-index: -1;: Mitz-indexwird die Stapelreihenfolge von Elementen festgelegt. Ein Wert von -1 bedeutet, dass das Pseudo-Element hinter anderen Elementen positioniert wird, was den Parallax-Effekt erzeugt, da es sich hinter dem Inhalt des übergeordneten Elements befindet.backface-visibility: hidden;: Diese Eigenschaft verhindert, dass die Rückseite des Pseudo-Elements sichtbar ist. Dies ist nützlich, wenn das Pseudo-Element gedreht oder skaliert wird, um sicherzustellen, dass die Webseite dahinter nicht sichtbar ist. Sie ist allerdings optional.
.background::after {
background: url("Bild2.jpeg");
background-size: cover;
background-position: left;
}background::after {}: Jetzt können wir endlich das Bild für unseren Parallax-Effekt einfügen. Wir definieren es in der Klasse Background. Dabei ist es wichtig, dass du den richtigen Pfad angibst und das Bild im selben Ordner hinterlegt ist, wie die CSS und HTML Datei. Size und position kannst du für deine Webseite anpassen.
@media screen and (min-width: 768px) {
section h1 {
font-size: 4rem;
}@media screenZusätzlich haben wir noch eine Größe von 4rem für unsere Überschift h1 bestimmt, dies ist für Bildschirme mit einer Breite von mindestens 768px.
Hiermit ist das Stylesheet für den Parallax-Effekt fertig. Jetzt geht es wieder an den HTML Code:
<!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>Parallax</h1>
</section>
<section class="parallax background">
<h1>
Tutorial
</h1>
</section>
<section class="no-parallax">
<h1>Von Nika, Indira und Kim</h1>
</main>
</body>
</html>Als letzten Schritt verlinken wir nun im <head> des HTML-Codes das Stylesheet und unsere Überschriften in sections unterteilen. Die section zeigt an in welcher Klasse die einzelnen Überschiften definiert sind. Sie müssen von no-parallax umgeben sein und die parallax background Klasse dazwischen haben, um den Effekt zu erreichen.
Somit ist der Parallax-Effekt etabliert in unserem Code und du weißt wie es geht! Gratulation!
Falls du jetzt noch Lust hast deinem Parallax-Effekt eine peppige Schift hinzuzufügen, haben wir hier einen kleinen Zusatz.
@font-face {
font-family: 'Tech';
src: url('Schriften/ethnocentric/ethnocentric\ rg.otf');
font-style: normal;
font-display: swap;
}
body {
margin: 0;
height: auto;
font-family: 'Tech', sans-serif;
}Zurück in unserem Stylesheet haben wir @font-face {} über dem body eingefügt. Wir benutzen die Schriftart unter dem Namen "Tech" und müssen dazu eine Quelle angeben. Das funktioniert so ähnlich wie die Verlinkung des Bildes. Achte hierbei darauf, den selben Ordner zu benutzen und die richtige Schriftart zu verlinken. Pass zusätzlich darauf auf, dass du im body bei der Angabe der font-family deine bevorzugte Schriftart als erstes aufführst. Sans-serif ist hierbei das Backup.
HMTL- Code und CSS-Datei im Überblick
<!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>Parallax</h1>
</section>
<section class="parallax background">
<h1>
Tutorial
</h1>
</section>
<section class="no-parallax">
<h1>Von Nika, Indira und Kim</h1>
</main>
</body>
</html>@font-face {
font-family: 'Tech';
src: url('Schriften/ethnocentric/ethnocentric\ rg.otf');
font-style: normal;
font-display: swap;
}
body {
margin: 0;
height: auto;
font-family: 'Tech', sans-serif;
}
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;
width: 60%;
}
.parallax::after {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.6);
background-size: cover;
z-index: -1;
backface-visibility: hidden;
}
.background::after {
background: url("Bild2.jpeg");
background-size: cover;
background-position: left;
}
@media screen and (min-width: 768px) {
section h1 {
font-size: 4rem;
}
}Quellen
Das Tutorial ist von dieser Webseite inspiriert.
Dieses Bild wurde von uns benutzt.
Diese Schrift wurde verwendet.
Hier unser Quellcode: Tutorial-Datei herunterladen
