Modernes CSS hat die Webentwicklung mit seinen leistungsstarken Funktionalitäten und außergewöhnlichen Fähigkeiten neu definiert. CSS ist ein All-in-One-Werkzeug, das herausragende Optionen bietet, um Webseiten hochgradig interaktiv und ansprechend zu gestalten. Ob Flexibilität im Design, schnelle Anpassung, hervorragende Styling-Optionen oder die fortschrittliche Benutzeroberfläche (UI) – CSS bietet End-to-End-Lösungen für alle Anforderungen der Webentwicklung und des Stylings. Vor allem können Sie mit CSS und HTML Animationen und Effekte hinzufügen, indem Sie nur wenige Zeilen Code schreiben, was mit JavaScript ansonsten mühsam wäre.
In dieser Anleitung führen wir Sie durch die Schritte zur Erstellung eines Parallax-Scrolling-Effekts mit CSS in Chrome.
Voraussetzungen
Um diesem Tutorial folgen zu können, müssen Sie über ein grundlegendes Verständnis von HTML und CSS verfügen.
Schritt 1: Ein neues Projekt erstellen
Beginnen wir mit dem Erstellen eines neuen Projektordners und neuer Dateien über die Befehlszeilenschnittstelle. Öffnen Sie Ihr Terminal und geben Sie den folgenden Befehl ein, um einen neuen Projektordner zu erstellen:
|
1 |
mkdir css-parallax |
Verwenden Sie den Befehl cd, um das Verzeichnis in den Ordner css-parallax zu wechseln:
|
1 |
cd css-parallax |
Erstellen Sie als Nächstes eine HTML-Datei im Ordner css-parallax, in dem wir alle HTML-Codes ablegen. Benennen Sie die Datei index.html und öffnen Sie sie mit dem Befehl nano :
|
1 |
nano index.html |
Sobald unsere Datei index.html bereit ist, fahren wir fort und strukturieren die Webseite, indem wir die einleitenden HTML -Codes hinzufügen.
Schritt 2: Struktur des grundlegenden HTML
In diesem Schritt gestalten wir unsere Webseite, indem wir die HTML-Codes hinzufügen. Fügen Sie die folgenden Codezeilen in die Datei index.html ein:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Parallax-Scrolling-Effekt mit CSS</title> </head> <body></body> </html> |
Nachdem Sie die grundlegende Struktur unserer Webseiten eingerichtet haben, erstellen Sie drei Sektionsklassen – zwei für die Hintergrundbilder und eine für den statischen, einfachen Hintergrund. Fügen Sie als Nächstes die folgenden Codezeilen in das <body> -Tag ein:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> ... <main class="wrapper"> <section class="section parallax bg1"> <h1>Vor dem Parallax-Scrolling-Effekt</h1> </section> <section class="section static"> <h1>Willkommen beim Parallax-Scrolling</h1> </section> <section class="section parallax bg2"> <h1>Nach dem Parallax-Scrolling-Effekt</h1> </section> </main> ... </body> |
Das Einfügen der HTML-Codes in das Tag <body> schließt die grundlegende Einrichtung unserer html.-Datei ab. In den folgenden Schritten werden wir CSS einführen und Styling-Optionen für jedes Element definieren.
Schritt 3: Einführung in CSS
Lassen Sie uns die Website gestalten, indem wir die CSS-Datei hinzufügen und den Parallax-Effekt erstellen. Erstellen Sie zuerst eine CSS-Datei im Ordner css-parallax Ordner, in dem wir alle CSS-Codes ablegen, die zur Erstellung des Parallax-Scrolling-Effekts erforderlich sind. Fügen Sie danach eine styles.css-Datei in Ihrem css-parallax-Ordner mit dem nano Befehl ein:
|
1 |
nano styles.css |
Wir gestalten unsere Webseite beginnend mit der .wrapper-Klasse. Die .wrapper-Klasse legt die Perspektiven- und Scrolleigenschaften für die gesamte Seite fest. Beginnen Sie mit der Wrapper-Klasse und geben Sie deren Höhe, Overflow und Perspektive an. Stellen Sie die Höhe des Wrappers auf einen konstanten Wert ein, damit der Parallax-Scrolling-Effekt funktioniert. In dieser Anleitung haben wir den Viewport-Wert mit 100vh festgelegt, um die volle Höhe des Viewports des Bildschirms zu erhalten. Sie können den vh-Wert basierend auf Ihren Projektanforderungen ändern. Deaktivieren Sie als Nächstes die horizontale Bildlaufleiste des Bildschirms, indem Sie die overflow-x-Eigenschaft auf „hidden“ setzen. Geben Sie außerdem den Wert der perspective-Eigenschaft als 3px an. Fügen wir die folgenden Codezeilen in der styles.css -Datei hinzu:
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
Schritt 4: Stil für die .section-Klasse hinzufügen
Fügen Sie neben der Wrapper-Klasse Stile für die .section-Klasse hinzu. Die .section-Klasse definiert die Größen-, Anzeige- und Texteigenschaften für die Hauptabschnitte. Setzen Sie die Position auf relative, um eine relative Positionierung des Kindelements .parallax::after und des Elternelements .section auszurichten. Behalten Sie die view-height(vh) als 100 bei, um die volle Höhe des Viewports des Bildschirms zu erhalten. Fügen Sie die anderen Parameter hinzu, ändern und gestalten Sie sie nach Ihren Bedürfnissen.
Fügen Sie in Ihrer styles.css Datei den folgenden Code neben der Wrapper-Klasse hinzu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrapper { height: 100vh; overflow-x: hidden; perspective: 3px; } .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: red; text-shadow: 0 0 5px #000; } |
Als Nächstes fügen wir ein Pseudoelement hinzu und gestalten es, um den Parallax-Effekt zu erzeugen und in Aktion zu setzen.
Schritt 5: Stile für die .parallax-Klasse hinzufügen
In diesem Schritt fügen wir ein Pseudoelement auf der .parallax hinzu. Dieses Pseudoelement ist das letzte Kindelement des Elements und fügt dem Hintergrundbild, das für die Initiierung des Parallax-Effekts verantwortlich ist, ein ::after-Pseudoelement hinzu. In der ersten Hälfte des Codes werden die grundlegende Anzeigespezifikation und Positionierung des Pseudoelements eingerichtet. In der nächsten Hälfte fügen wir die transform-Eigenschaft mithilfe der CSS-Funktion translateZ() hinzu und belassen sie bei (-1px). Fügen Sie außerdem einen z-index hinzu, um die vertikale Stapelung zu steuern.
Fügen Sie den folgenden Code unter der .section Klasse hinzu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
... .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000; } .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } ... |
Schritt 6: Bilder und Hintergrund für jeden Abschnitt hinzufügen
Fügen wir die letzten CSS-Eigenschaften in den Hintergrundbildern und der Hintergrundfarbe des statischen Abschnitts hinzu. Beginnen Sie mit dem Hinzufügen einer soliden Hintergrundfarbe zum .static-Abschnitt. Setzen Sie die Hintergrundfarbe auf aqua und fügen Sie den folgenden Code nach der .parallax::after Klasse hinzu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } .static { background: aqua; } ... |
Die .static-Klasse fügt dem statischen Bereich, der kein Bild hat, einen Hintergrund hinzu. Die anderen beiden Bereiche mit der .parallax-Klasse haben eindeutige Klassen, die für Hintergrundbilder vorgesehen sind. Fügen Sie die URLs der Hintergrundbilder in den Klassen .bg1 und .bg2 ein.
In diesem Tutorial verwenden wir zufällige Bilder von Unsplash. Sie können auch Bilder von anderen Websites wie Pixapay, Placekitten, und Pexels, um nur einige zu nennen, verwenden und diese nach Belieben anpassen. Fügen Sie den folgenden Code der .static-Klasse hinzu:
|
1 2 3 4 5 6 7 8 9 10 |
... .static { background: aqua; } .bg1::after { background-image: url('https://images.unsplash.com/photo-1496543622559-12e927bdd81b'); } .bg2::after { background-image: url('https://images.unsplash.com/photo-1516422641841-cd9803ab02c6'); ... |
Schritt 7: CSS mit HTML verbinden
Nachdem wir nun den gesamten Code für den Parallax-Scrolling-Effekt hinzugefügt haben, verknüpfen wir die styles.css-Datei mit der index.html:
|
1 2 3 4 5 6 7 8 9 10 |
... <head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Parallax-Scrolling-Effekt mit CSS</title> </head> ... |
Öffnen Sie die index.html, die wir in Schritt 2 erstellt haben, im Chrome-Browser:
Fazit
In diesem Tutorial haben wir die Schritte zur Einrichtung einer funktionierenden Webseite mit einem grundlegenden Setup durchlaufen. Es gibt viele weitere interessante Optionen und Anpassungsmöglichkeiten, mit denen Sie experimentieren können. Sie können versuchen, Schatteneffekte hinzuzufügen, das Scrollen von Bildern zu ändern und andere Anpassungen vorzunehmen, um Ihr Lernen unterhaltsam und spannend zu gestalten.
Um tiefer in Themen der Webentwicklung einzutauchen, sehen Sie sich diese Ressourcen aus unserem Blog:
- Ein Leitfaden zum Hinzufügen von JavaScript zu HTML
- Arbeiten mit JavaScript: Was sind Objekte
- Was is jQuery und wie können Sie es verwenden
Viel Spaß beim Programmieren!
Kommentare
Noch keine Kommentare. Schreiben Sie den ersten.