CSS-Techniken
Für einen Webentwickler stehen beim Erstellen eines Parallaxen-Bildlaufeffekts verschiedene Techniken zur Verfügung. Eine dieser Techniken ist die VerwendungCascaded Styling Sheets(CSS).
CSS erklärt, wie die HTML-Elemente auf dem Bildschirm angezeigt werden. Man kann eine CSS-Datei erstellen und diese für die gesamte Website verwenden. Es ist einfacher, eine CSS-Datei hinzuzufügen, als jedem HTML-Element Stile hinzuzufügen und diese in verschiedenen Teilen der Webseite zu verwalten.
Note- Einige der unten in diesem Kapitel beschriebenen Methoden gelten nur für Desktop-Computer und nicht für mobile Geräte. In den Schritten wird erwähnt, wenn eine bestimmte Technik für mobile Geräte nicht geeignet ist.
Wenn man berücksichtigt, dass CSS in alle zusätzlichen Zeichnungen im Dokumentobjektmodell (DOM) ausgelagert wird, wird die Hardwarebeschleunigung stärker genutzt und ein reibungsloser Effekt erzielt, ohne die CPU zu belasten.
Absolute Positionsmethode
Diese Methode wird häufig verwendet, um einen Parallaxeeffekt zu erzeugen, da dieser im Vergleich zu anderen verfügbaren Optionen relativ leicht ist. Die Position des Hintergrundbilds bleibt relativ zu anderen Inhalten auf dem Bildschirm unverändert. In dem unten diskutierten Beispiel sehen Sie, wie es mit der Magie von CSS gemacht wird.
In diesem Abschnitt werden zwei Methoden für die Absolutpositionsmethode beschrieben:
- Einzelner Hintergrund
- Mehrfacher Hintergrund
Einzelne Hintergrundmethode
Bei dieser Methode erstellen wir zwei Dateien im selben Ordner. Beachten Sie die unten angegebenen Schritte für denselben Zweck -
Step 1
Wir müssen zwei Dateien im selben Ordner erstellen: die erste Datei mit HTML-Markup und die zweite mit CSS-Code.
Step 2
Definieren wir nun unser HTML-Markup. Beachten Sie den unten angegebenen Code -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "BgContainer">
<div class = "Parallax">
<h1> Welcome! </h1>
</div>
<div class = "FgContainer">
<div class = "MainContent">
<p>
Here we will go ahead with some content which will really vary
according to the content on your site. I am just typing out this
content as it is sometimes good to engage user than the usual lorem
ipsum text!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>
Step 3
Notizblock öffnen. Kopieren Sie das obige Code-Snippet und fügen Sie es ein.
Wenn Sie die Datei speichern, klicken Sie unter Save as type, wählen All Files. Geben Sie nach Bedarf einen Namen für Ihre Datei ein, dem jedoch eine Erweiterung folgen muss -.html wie im Screenshot unten gezeigt.
Step 4
Sobald die Datei gespeichert ist, erstellen Sie eine weitere Datei im Editor und fügen Sie den unten angegebenen Code ein -
html, body {
font-size: 18px;
line-height: 28px;
}
h1 {
letter-spacing: -15px;
color: white;
text-align: center;
font-size: 200px;
font-weight: 800;
line-height: 200px;
}
BgContainer {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
FgContainer {
position: relative;
display: block;
background-color: white;
z-index: 1;
}
MainContent {
max-width: 750px;
margin: 0 auto;
padding: 75px 0;
}
p {
margin: 75px 0;
}
.Parallax {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
background-color: rgb(250,228, 216);
}
Wie Sie im letzten Schritt gesehen haben, beim Speichern der Datei unter Save as Typ, wählen Sie All Files. Geben Sie nach Bedarf einen Namen in Ihre Datei ein und fügen Sie eine Erweiterung hinzu.css dazu.
Analyse des Codes
Lassen Sie uns verstehen, welcher Teil des Codes für den Parallaxeeffekt verantwortlich ist. Die wichtigste Arbeit für die Parallaxe erfolgt unter Verwendung von Perspektiven- und Transformationsregeln. Beziehen aufline 15im obigen Code-Snippet. Die Perspektive wird für unsere geschaffenBgContainerzuerst. Dies initiiert eine Plattform für Transformationsregeln.
In dem Parallax Container ab Linie 40, transform Regel in Zeile 48 schiebt das BgContainer-Div mit translate (-1px) in den Hintergrund.
Sie können die Werte für Übersetzungs- und Skalierungsparameter ändern, um die Tiefe der Parallaxe zu ändern.
Wenn Sie die HTML-Datei öffnen, wird der Parallaxeeffekt wie unten gezeigt angezeigt.
Note - Für den Rest des Tutorials wird davon ausgegangen, dass der Leser die HTML- und CSS-Dateien gemäß der in der obigen Methode angegebenen Ordnerstruktur erstellen kann.
Methode mit mehreren Hintergründen
Bei dieser Methode werden verschiedene Bilder angezeigt, wenn der Benutzer die Seite nach unten scrollt. Es gibt ein Bild mit Stiften, das in verschiedenen Farbkombinationen verwendet wird, um diesen Effekt zu veranschaulichen.
Beachten Sie den folgenden Code für die HTML-Seite wie unten gezeigt -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Multiple Background Example</h1>
<div class = "parallax">
<div class = "bg__First">First</div>
<div class = "bg__Second">Second</div>
<div class = "bg__Third">Third</div>
<div class = "bg__Fourth">Fourth</div>
</div>
</body>
</html>
Ähnlich wie im vorherigen Beispiel werden wir verwenden styles.cssam selben Speicherort wie diese HTML-Datei gespeichert. Wir haben drei verschiedene Divs, die als Erste, Zweite, Dritte und Vierte bezeichnet werden.
Der CSS-Code für das Parallaxen-Scrollen ist unten angegeben -
body, html {
height : 100%;
font-family : sans-serif;
}
.parallax [class*="bg__"] {
position : relative;
height : 50vh;
text-indent : -9999px;
background-attachment : fixed;
background-position : top center;
background-size : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
height : 100vh;
}
.parallax .bg__First {
background-image : url("parallax0.png");
}
.parallax .bg__Second {
background-image : url("parallax1.png");
}
.parallax .bg__Third {
background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
background-image : url("parallax1.png");
}
Hier erzeugen wir den Parallaxeeffekt aus Zeile 7, wichtige Eigenschaft ist hier background-attachment:fixed.
Bei Verwendung dieser Eigenschaft bleibt das erste Bild mit Buntstiften immer oben. Wenn Sie nach unten scrollen, werden verschiedene Bilder wie in Zeile 28 beschrieben angezeigt.
Infolgedessen können Sie den Parallaxeeffekt sehen, wie in GIF unten gezeigt. Das folgende Bild ist der Screenshot des Beispiels, das wir für mehrere Hintergründe betrachtet haben.
Reine CSS-Parallaxe
Kombinieren wir das Wissen aus den beiden vorherigen Methoden und erstellen Sie einen erweiterten Pure CSS Parallax-Effekt.
Der Unterschied wird die Art und Weise sein, wie wir das arrangieren image Element und die z-transformEigentum. Die Erläuterung der Eigenschaft erfolgt nach dem CSS-Code.
Erstellen Sie die HTML-Datei mit dem folgenden Code mit der üblichen Methode aus Notepad.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "wrapParallax">
<div class = "parallax_one">
<img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
</div>
<div class = "parallax_two">
<h1>Pure CSS Parllax Advanced Level</h1>
</div>
<div class = "parallax_three">
<img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
</div>
</div>
</body>
</html>
Für die CSS-Datei ist der Code unten angegeben -
body, html {
padding: 0;
margin: 0;
}
h1 {
color: blue;
text-align: center;
padding: 20px;
text-shadow: 0px 0px 10px #fffff;
}
img {
width:100vw;
height:100vh;
}
.wrapParallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.parallax_one {
transform: translateZ(-100px) scale(2)
}
.parallax_two {
z-index: 10;
transform: translateZ(-200px) scale(3)
}
.parallax_three {
margin-top: 100vh;
}
Analyse des Codes
Wir haben die Position der ersten Schicht in festgelegt line 26 durch die Nutzung position:absoluteEigentum. Die Positionen sind ebenfalls fest auf 0 codiert.
Im parallax_two, das ist die Ebene mit Überschrift, die wir angewendet haben z-index: 10um der Überschrift einen schwebenden Effekt zu verleihen. Die Schichtparallax_three wird durch Bereitstellen einer Eigenschaft am oberen Rand nach unten verschoben.
Auf diese Weise können wir die Komplexität unseres Parallax-Effekts erhöhen.
Beobachten Sie den Effekt wie in der folgenden Abbildung gezeigt.