Einführung
Modernes CSS ist ein leistungsstarkes Tool, mit dem Sie viele erweiterte Funktionen der Benutzeroberfläche (UI) erstellen können. In der Vergangenheit beruhten diese Funktionen auf JavaScript-Bibliotheken.
In diesem Handbuch richten Sie einige CSS-Zeilen ein, um einen scrollenden Parallaxeneffekt auf einer Webseite zu erzeugen. Sie verwenden Bilder aus placekitten.com als Platzhalter-Hintergrundbilder.
Sie erhalten eine Webseite mit einem reinen CSS-Scrolling-Parallax-Effekt, sobald Sie das Tutorial abgeschlossen haben.
Warnung: In diesem Artikel werden experimentelle CSS-Eigenschaften verwendet, die nicht browserübergreifend funktionieren. Dieses Projekt wurde getestet und funktioniert auf Chrome.
Diese Technik funktioniert in Firefox, Safari und iOS aufgrund einiger Optimierungen dieser Browser nicht gut.
Schritt 1 — Erstellen eines neuen Projekts
Verwenden Sie in diesem Schritt die Befehlszeile, um einen neuen Projektordner und Dateien einzurichten. Öffnen Sie zunächst Ihr Terminal und erstellen Sie einen neuen Projektordner.
Geben Sie den folgenden Befehl ein, um den Projektordner zu erstellen:
- mkdir css-parallax
In diesem Fall haben Sie den Ordner css-parallax aufgerufen. Wechseln Sie nun in den css-parallax Ordner:
- cd css-parallax
Erstellen Sie als nächstes eine index.html Datei in Ihrem css-parallax Ordner mit der nano befehl:
- nano index.html
Sie werden den gesamten HTML-Code für das Projekt in diese Datei einfügen.
Im nächsten Schritt beginnen Sie mit der Erstellung der Struktur der Webseite.
Schritt 2 – Einrichten der Anwendungsstruktur
In diesem Schritt fügen Sie den HTML-Code hinzu, der zum Erstellen der Struktur des Projekts erforderlich ist.
Fügen Sie in Ihrer index.html -Datei den folgenden Code hinzu:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Scrolling Parallax</title> </head> <body></body></html>Dies ist die Grundstruktur der meisten Webseiten, die HTML verwenden.
Fügen Sie den folgenden Code in das <body> -Tag ein:
<body>... <main> <section class="section parallax bg1"> <h1>Cute Kitten</h1> </section> <section class="section static"> <h1>Boring</h1> </section> <section class="section parallax bg2"> <h1>Fluffy Kitten</h1> </section> </main>...</body>Dieser Code erstellt drei verschiedene Abschnitte. Zwei haben ein Hintergrundbild und eines einen statischen, einfachen Hintergrund.
In den nächsten Schritten fügen Sie die Stile für jeden Abschnitt mithilfe der Klassen hinzu, die Sie in HTML hinzugefügt haben.
Schritt 3 – Erstellen einer CSS-Datei und Hinzufügen von initialem CSS
In diesem Schritt erstellen Sie eine CSS -Datei. Dann fügen Sie das anfängliche CSS hinzu, das zum Formatieren der Website und zum Erstellen des Parallaxeneffekts erforderlich ist.
Erstellen Sie zuerst eine styles.css Datei in Ihrem css-parallax Ordner mit dem nano Befehl:
- nano styles.css
Hier werden Sie alle CSS-Dateien ablegen, die zum Erstellen des Parallax-Scrolling-Effekts erforderlich sind.
Beginnen Sie als nächstes mit der .wrapper -Klasse. Fügen Sie in Ihrer styles.css -Datei den folgenden Code hinzu:
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px;}Die .wrapper Klasse legt die Perspektive und Scroll-Eigenschaften für die gesamte Seite.
Die Höhe des Wrappers muss auf einen festen Wert gesetzt werden, damit der Effekt funktioniert. Sie können die Ansichtsfenstereinheit vh auf 100 , um die volle Höhe des Ansichtsfensters des Bildschirms abzurufen.
Wenn Sie die Bilder skalieren, fügen sie dem Bildschirm eine horizontale Bildlaufleiste hinzu, sodass Sie sie deaktivieren können, indem Sie overflow-x: hidden; . Die Eigenschaft perspective simuliert den Abstand vom Ansichtsfenster zu den Pseudoelementen, die Sie weiter unten in CSS erstellen und transformieren.
Im nächsten Schritt fügen Sie mehr CSS hinzu, um Ihre Webseite zu gestalten.
Schritt 4 – Hinzufügen von Stilen für die .abschnittsklasse
In diesem Schritt fügen Sie der .section -Klasse Stile hinzu.
Fügen Sie in Ihrer styles.css -Datei den folgenden Code unterhalb der Wrapper-Klasse hinzu:
.wrapper { height: 100vh; overflow-x: hidden; perspective: 2px;}.section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000;}Die .section Klasse definiert die Größe, Anzeige und Texteigenschaften für die Hauptabschnitte.
Legen Sie eine Position von relative fest, damit das untergeordnete Element .parallax::after absolut relativ zum übergeordneten Element positioniert werden kann .section.
Jeder Abschnitt hat eine view-height(vh) von 100 , um die volle Höhe des Darstellungsbereichs einzunehmen. Dieser Wert kann für jeden Abschnitt geändert und auf die gewünschte Höhe eingestellt werden.
Schließlich werden die restlichen CSS -Eigenschaften verwendet, um den Text in jedem Abschnitt zu formatieren und zu formatieren. Es positioniert den Text in der Mitte jedes Abschnitts und fügt eine Farbe von white hinzu.
Als nächstes fügen Sie ein Pseudoelement hinzu und stylen es, um den Parallaxeneffekt auf zwei der Abschnitte in Ihrem HTML .
Schritt 5 – Hinzufügen von Stilen für die .parallax Class
In diesem Schritt fügen Sie die Stile zur .parallax Klasse hinzu.
Zuerst fügen Sie der .parallax Klasse ein Pseudoelement hinzu, das formatiert werden soll.Hinweis: Sie können die MDN-Webdokumente besuchen, um mehr über CSS-Pseudoelemente zu erfahren.
Fügen Sie den folgenden Code unter der .section Klasse hinzu:
....section { position: relative; height: 100vh; 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; transform: translateZ(-1px) scale(1.5); background-size: 100%; z-index: -1;}...Die.parallax Klasse fügt dem Hintergrundbild ein ::after Pseudoelement hinzu und stellt die für den Parallaxeneffekt erforderlichen Transformationen bereit.
Das Pseudoelement ist das letzte Kind des Elements mit der Klasse .parallax.
Die erste Hälfte des Codes zeigt und positioniert das Pseudo-Element. Die Eigenschaft transform verschiebt das Pseudoelement auf z-index wieder von der Kamera weg und skaliert es dann wieder, um das Ansichtsfenster auszufüllen.
Da das Pseudoelement weiter entfernt ist, scheint es sich langsamer zu bewegen.
Im nächsten Schritt fügen Sie die Hintergrundbilder und den statischen Hintergrundstil hinzu.
Schritt 6 – Hinzufügen der Bilder und des Hintergrunds für jeden Abschnitt
In diesem Schritt fügen Sie die endgültigen CSS -Eigenschaften hinzu, um die Hintergrundbilder und die Hintergrundfarbe des statischen Abschnitts hinzuzufügen.
Fügen Sie zunächst dem Abschnitt .staticeine feste Hintergrundfarbe mit dem folgenden Code nach der Klasse .parallax::after hinzu:
....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;}.static { background: red;}...Die .static -Klasse fügt dem statischen Abschnitt einen Hintergrund hinzu, der kein Bild enthält.
Die beiden Abschnitte mit der .parallax -Klasse haben auch eine zusätzliche Klasse, die für jeden unterschiedlich ist. Verwenden Sie die Klassen .bg1 und .bg2, um die Kätzchen-Hintergrundbilder hinzuzufügen.
Fügen Sie der .static Klasse den folgenden Code hinzu:
....static { background: red;}.bg1::after { background-image: url('https://placekitten.com/g/900/700');}.bg2::after { background-image: url('https://placekitten.com/g/800/600');}...Die .bg1, .bg2 Klassen fügen die entsprechenden Hintergrundbilder für jeden Abschnitt hinzu.
Die Bilder stammen von der placekitten-Website. Es ist ein Dienst zum Abrufen von Bildern von Kätzchen zur Verwendung als Platzhalter.
Nachdem der gesamte Code für den Parallax-Scrolling-Effekt hinzugefügt wurde, können Sie eine Verknüpfung zu Ihrer styles.css -Datei in Ihrer index.html herstellen.
Schritt 7 – Stile verknüpfen.css und Öffnungsindex.html in Ihrem Browser
In diesem Schritt verknüpfen Sie Ihre styles.css -Datei und öffnen das Projekt in Ihrem Browser, um den Parallax-Scrolling-Effekt zu sehen.
Fügen Sie zunächst den folgenden Code zum <head> -Tag in der index.html -Datei hinzu:
...<head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Parallax</title></head>...Jetzt können Sie Ihre index.html Datei in Ihrem Browser öffnen:
Damit haben Sie eine funktionierende Webseite mit Scrolling-Effekt eingerichtet. Schauen Sie sich dieses GitHub-Repository an, um den vollständigen Code zu sehen.
Fazit
In diesem Artikel richten Sie ein Projekt mit einer index.html und styles.css Datei ein und haben nun eine funktionsfähige Webseite. Sie haben die Struktur Ihrer Webseite hinzugefügt und Stile für die verschiedenen Abschnitte der Website erstellt.
Es ist möglich, die verwendeten Bilder oder den Parallaxeneffekt weiter weg zu platzieren, damit sie sich langsamer bewegen. Sie müssen die Pixelmenge in den Eigenschaften perspective und transform ändern. Wenn Sie nicht möchten, dass ein Hintergrundbild gescrollt wird, verwenden Sie background-attachment: fixed; anstelle von perspective/translate/scale .