Hintergrund und Einführung
Wenn Sie eine moderne Website auf Computern oder Mobiltelefonen durchsuchen, haben Sie möglicherweise festgestellt, dass sich beim Scrollen der Website nach unten / oben der gesamte Bildschirm in Richtung Scrollen bewegt. Wenn dies der Effekt im Hintergrund ist, ändern sich auch die Informationen im Vordergrund, wenn Sie scrollen. Dieser Effekt kann kurz als Parallax Scrolling bezeichnet werden.
Scrollen
Lassen Sie uns verstehen, was es bedeutet, indem Sie scrollen. Wenn Sie eine Webseite anzeigen, wird die Aktion zum Durchsuchen der Webseite in eine beliebige Richtung (nach oben, unten, links und rechts) als Scrollen bezeichnet.
Wenn Sie ein Desktop-Computerbenutzer sind, wird diese Aktion normalerweise mit dem Mausrad ausgeführt.
Geschichte
Schauen wir uns das Wort Scroll an. In alten Tagen wurden handgeschriebene Schriftrollen verwendet, um eine Nachricht an andere Personen zu senden, die sich in großer Entfernung befinden. Diese Schriftrollen sahen wie unten gezeigt aus -
Stellen Sie sich die Aktion der Person vor, die die Schriftrolle hält. Um den Inhalt vollständig zu lesen, müsste die Person „scrollen“ und weiter rollen. Die Verwendung dieser Schriftrollen diente auch zur Pflege eines Aufzeichnungstextes oder von Entscheidungen. Im Laufe der Zeit nahm die Verwendung von Schriftrollen zu, da sie aus verschiedenen Schreibmaterialien wie Papyrus, Pergament und Papier hergestellt wurden.
Mit der Entwicklung der Computer wurde die Verarbeitung und Speicherung sehr großer Dokumente, Tabellen und Bilder möglich. Manchmal waren die Daten so groß, dass die Bildschirmgröße einfach nicht ausreichte, um die Daten dem Benutzer zu präsentieren. Wenn die anzuzeigenden Daten größer als das Fenster oder der Anzeigebereich waren, blieben die Daten ausgeblendet. Dies erforderte einen Ansatz zur Erweiterung des Bildschirmbereichs.
Einige Optionen zum Erweitern des Bildschirms sind unten aufgeführt -
- So vergrößern Sie den Bildschirm
- So reduzieren Sie die Datengröße
- Scrollen verwenden
Dieser Bildlaufmechanismus ist wichtiger für Personen, die mit Grafikdesign und Fotobearbeitung arbeiten.
Parallax Scrolling Origin
Lassen Sie uns einen Blick auf die Geschichte des Parallaxen-Scrollens werfen. Zunächst werden wir verstehen, was das Wort Parallaxe bedeutet. Das Wort Parallaxe kommt vom griechischen Wortπαράλλαξις (Parallaxis), was Wechsel bedeutet.
Wenn wir ein Objekt aus einem Winkel betrachten, wird das Objekt auf eine bestimmte Weise angezeigt. Wenn Sie jedoch dasselbe Objekt aus verschiedenen Positionen bewegen, kommt es zu einer offensichtlichen Bewegung von Objekten. Dieses Phänomen wird als Parallaxe bezeichnet.
Nachdem wir den Ursprung und den Hintergrund von Parallax verstanden haben, wollen wir die Geschichte und das Konzept des Parallax-Scrollens im Webdesign verstehen.
Definition
Laut Wikipedia - Parallax scrolling ist eine Technik in der Computergrafik, bei der Hintergrundbilder langsamer an der Kamera vorbeiziehen als Vordergrundbilder, wodurch eine Illusion von Tiefe in einer 2D-Szene entsteht und das Gefühl des Eintauchens in die virtuelle Erfahrung verstärkt wird.
Das Parallaxen-Scrollen wurde in den frühen Tagen der Animation eingesetzt. Viele der Animationsstudios (wie Disney) verwendeten Multiplane-Kameras, um den Parallaxeeffekt zu erzielen.
Während sich die Computergrafiktechnologien zusammen mit den neuesten Frameworks wie JavaScript weiterentwickelten, können Webdesigner und Entwickler jetzt Websites mit einer umfassenden Erfahrung erstellen. Obwohl das Parallaxen-Scrollen mit einigen Ebenen begann, wurde es mit Bildlaufleisten in Computern auf die nächste Ebene gebracht. Die Technik blieb dieselbe, aber aufgrund ihrer Anwendung für das Scrollen wurde eine einzigartige Erfahrung geschaffen.
Beispiele
Das Parallaxen-Scrollen wird in modernen Websites häufig verwendet. Da das Parallaxen-Scrollen sowohl für Handys als auch für Desktop-Sites auf einmal implementiert werden kann, hat die Popularität solcher Sites in den letzten Jahren sprunghaft zugenommen.
Einige Beispiele für Websites, die Parallaxen-Scrollen verwenden, sind unten aufgeführt:
Bär Grylls
Im Verlauf der Animation können Sie sehen, wie der Inhalt der Website interaktiv wird. Wenn Sie vorwärts scrollen, werden immer mehr Informationen angezeigt.
Machen Sie Ihr Geld wichtig
Um den Leser mit den Vorteilen einer Kreditgenossenschaft vertraut zu machen, führt Sie diese Website durch eine Storyline. Während Sie vorwärts scrollen, werden Informationen auf einzigartige Weise angezeigt.
InfoQuest Infografik
Die Reise eines Mitarbeiters, um wichtige Informationen an seinem Arbeitsplatz zu finden, wird anhand des Bildlaufs dargestellt.
GitHub 404
Dies unterscheidet sich ein wenig von der üblichen Parallaxenerfahrung. Das Objekt am oberen Bildschirmrand bewegt sich, wenn Sie den Mauszeiger darüber bewegen.
Anwendungen des Parallax Scrolling
Inzwischen sollte aus der Definition und dem Hintergrund klar sein, dass das Parallaxen-Scrollen in einer Vielzahl digitaler Medien nützlich ist. Einige der Anwendungen sind Parallaxen-Scrolling sind unten -
Spieldesign
Parallax-Scrollen ist im Spieldesign weit verbreitet. Der Charakter muss sich relativ zum Hintergrund bewegen und mit der Steuerung des Spielers über Maus und Tastatur muss sich die gesamte Erfahrung ändern. Das Spieldesign ist eine sehr primitive und dennoch trendige Methode zum Parallaxen-Scrollen.
Websites
Um den Benutzer auf die Website aufmerksam zu machen, ist eine dynamische und unterschiedliche Erfahrung wichtig. Wie Sie vielleicht anhand der oben beschriebenen Beispiele für Websites bemerkt haben, wird das Parallaxen-Scrollen aufgrund seiner interaktiven Darstellung zum Inhalt hinzugefügt.
In diesem Kapitel werden Konzepte des Webdesigns und die Vorteile der Verwendung von Parallax Scroll im Webdesign behandelt.
Webdesign Hintergrund
Seit Beginn des 20. ten Jahrhunderts Papiermedien hat sich zu einem ruinösen Wettbewerb bekam durch digitale Medien. Zu den digitalen Medien gehört das, was wir im Internet sehen, und damit auch die dazugehörigen alliierten Magazine.
Die Newsletter, die Sie im Rahmen von Wochen- / Monatsabonnements erhalten, sind auch in den digitalen Medien enthalten. In erster Linie hängen digitale Medien stark von Mobil- und Desktopgeräten ab. Es macht einen Unterschied, wann Sie Inhalte auf Ihrem Handy (Handheld) sowie auf Desktop-Geräten sehen können. Bei der Anzeige von Inhalten auf einem der beiden Geräte spielt eine bestimmte Art der Gestaltung des Inhalts eine Rolle.
Diese Art der Gestaltung wird als bezeichnet Web Designing. Unter dem Gesichtspunkt des Entwurfs oder der Codierung berücksichtigt ein Webseiten-Designer, wenn er eine Webseite erstellen möchte, auch die mobilen Geräte.
Laut Wikipedia Web design umfasst viele verschiedene Fähigkeiten und Disziplinen bei der Erstellung und Pflege von Websites. Eine dieser Fähigkeiten ist das Entwerfen einer wirkungsvollen Erfahrung für Benutzer. Das Webdesign berücksichtigt diese Erfahrung und bietet eine organisierte Möglichkeit zum Anordnen des Seiteninhalts sowie ein anderes Styling.
Das Webdesign umfasst - Schnittstellendesign, Grafikdesign und die Verwendung bestimmter Standards zum Schreiben des Codes. Diese Arbeit kann von einer einzelnen Person oder von einem Team von Personen ausgeführt werden.
Es gibt viele Tools auf dem Markt, die diese Arbeit vereinfachen. Es liegt jedoch an den kreativen Fähigkeiten, das Erscheinungsbild einer Webseite zu erstellen.
Modernes Webdesign
Mit der technologischen Entwicklung gibt es eine Explosion des Wissens. Das Internet ist zu einer Sache geworden und hat die Qualität unseres Lebens in die Höhe geschossen. Zu jedem Zeitpunkt werden immer mehr Informationen von einem durchschnittlichen Internetnutzer verarbeitet. Diese Informationen können in Form einer Website auf einem Desktop-Computer oder von einem Handheld-Gerät vorliegen. Tablet oder ein Mobiltelefon.
Obwohl so viele Informationen versuchen, die Aufmerksamkeit des Benutzers auf sich zu ziehen, ist es offensichtlich, dass als Person, die ein Web-Erlebnis entwirft, there are only 3 seconds allocated to pass the message across.
Wie geht man damit um? Es ist mehr als wichtig, die Nachricht weiterzugeben, da sie die Quelle für jedes Webdesign ist. Sie möchten eine Website erstellen, die kommuniziert und gleichzeitig den Benutzer anzieht und dazu bringt, sich an den Inhalt zu halten. Es ist in der Tat eine schwierige Aufgabe.
Angesichts des enormen Arbeitsumfangs für einen bestimmten Webinhalt tauchen immer mehr Menschen in die Welt des Webdesigns ein. Ein kreativer Webdesigner ist das Stadtgespräch, dank seines erstaunlichen Talents, eine gute Benutzererfahrung zu schaffen. Der Webdesigner kann derzeit eine Stelle bei einer Marketing- / Werbefirma antreten oder sich selbstständig mit dem Webdesign befassen.
Aesthetic appeal is the key for a given content on web. Dies bedeutet, dass ein Webdesigner die Prinzipien und Grundlagen von Design, Farbe, Abstand usw. kennen muss. Immer mehr Benutzer sehen jeden Tag qualitativ hochwertige Webinhalte. Es ist offensichtlich, dass man die aktuelle Webseite oder Website mit der vergleichen wird, die vor einigen Stunden oder Minuten besucht wurde. Die Reihenfolge der Inhalte, gepaart mit guten Grafiken und Farben, hat viele eigenständige Banner / Seiten zu einer beliebten Sache im Internet gemacht.
Beispiel
Nehmen wir den Fall einer einfachen Grafik. Es gibt viele Grafiken im Internet, sogenannte Meme. Sie sind einfachGraphics Interchange Format (GIF)Bilder mit Text, der in die Grafiken eingebettet ist. Diese Memes machen Internetrunden, basierend auf einem jüngsten Ereignis in einem Teil der Welt. Wenn wir uns dieses Beispiel ansehen, ist der einzige Reiz, den sie haben, eine Grafik und ein relevanter oder irrelevanter Text.
Trotzdem hat es so an Popularität gewonnen, dass man über erstaunliche Möglichkeiten im Internet nachdenkt.
Damit ein Webdesign effektiv ist, spielen sowohl die Kreativität als auch die Methode zur Kommunikation der Nachricht eine wichtige Rolle.
It is important point to note that a successful web page is combination of Web Design and Web Development. Gemäß dem aktuellen Markttrend ist neben dem Webdesigner ein Webentwickler ein Muss im Team. Ein Webdesigner wird immer nach Inspiration suchen und seine Kreativität einsetzen, um Grafiken und relevante Farbschemata zu erstellen. Während ein Webentwickler seine Codierungsfähigkeiten einsetzt, um die Grafiken und Farbschemata auf der Website live zu bringen.
Ein Webdesigner sollte auch über Kenntnisse im Schreiben des Codes verfügen, um die beabsichtigte Grafik oder das Farbschema für einen Webentwickler nutzbar zu machen. Ein einfacher Code in einer einfachen Anwendung wie Notepad kann einem Webdesigner helfen, den treibenden Platz in der Webentwicklung einzunehmen.
Verwenden von Parallax Scrolling
Parallax Scrolling fällt in die Arbeitsgrenze von Webdesigner und Webentwickler. Ein Webdesigner kann den Effekt von Parallax Scrolling mithilfe von Tools wie InVision und UXPin erzeugen, um dem Webentwickler das beabsichtigte Verhalten beim Scrollen zu vermitteln. Darüber hinaus wird ein Webentwickler seine Fähigkeiten einsetzen, um den Parallaxen-Scrolling-Effekt zu erzielen. Dies kann mit verschiedenen JavaScript-, CSS- und jQuery-Techniken erfolgen. Eine detaillierte Beschreibung jeder dieser Methoden finden Sie in den nächsten Kapiteln.
Gemäß der im vorherigen Abschnitt angegebenen Definition parallax scrolling is a technique when the background content is moved at a different speed than the foreground content when scrolling.
Auf dieser Website wird eine einfache CSS-Technik zum Erstellen eines Parallaxen-Bildlaufeffekts gezeigt - The Urban Walks .
Wie Sie im obigen Screenshot sehen können, ändert das Mobiltelefon in der Mitte des Bildschirms den Inhalt, nachdem Sie zweimal gescrollt haben. Beachten Sie auch beim ersten Scrollen, dass sich der Hintergrund mit dem Mobiltelefon ändert.
Dieser Übergang gibt Ihnen das Gefühl, dass das Telefon an seinem Platz konstant ist und sich der Hintergrund ändert, wenn Sie nach unten scrollen. Dieser Effekt wird als Parallaxen-Scrolling-Effekt bezeichnet. Sie wissen, dass Sie nach unten scrollen, da sich ganz rechts auf dem Bildschirm eine Anzeige der Bildschirme in Form einiger Punkte befindet.
Die erste Verwendung des Parallaxen-Scrollens war in den alten Computerspielen. Wo sich ein festes Hintergrundbild langsamer bewegt, wenn sich das Zeichen schneller als der Hintergrund bewegt. Einige Beispiele für diese Spiele - Disneys Aladdin und Disneys König der Löwen. Diese Spiele wurden bereits 1993 bzw. 1994 gestartet.
Es ist zwar richtig, dass es mit den Spielen begann, aber derzeit betonen viele Webdesigner den Effekt, dass ihr Publikum ihre Website liebt. Die Vorteile des Parallaxen-Scrollings werden von der Website auf mobile Websites ausgeweitet.
Diese Websites, die einmal mit Parallax-Scrolling für die Desktop-Versionen erstellt wurden, werden mit Code hinzugefügt, der auch mobile Bildschirme unterstützt.
Vorteile von Parallax Scrolling in Web und Mobile
In diesem Abschnitt werden die Vorteile der Verwendung von Parallaxen-Bildlauf aus verschiedenen Perspektiven erläutert, wie nachstehend erläutert.
Aus der Perspektive des Publikums
Mit dem Parallaxen-Scrollen ist ein lustiges Element verbunden. Wie Sie im obigen Beispiel gesehen haben, ist die Übermittlung von Informationen aus tausend Wörtern einfacher geworden, da der Benutzer von verschiedenen Bildschirmen aus blättert.
Wenn wir einen Erstbenutzer betrachten, ist mit jeder Schriftrolle eine Neugier verbunden. Dies bereichert nicht nur die Erfahrung der Website, sondern erhöht auch die Wahrscheinlichkeit, dass der Benutzer beim ersten Besuch der Website selbst mehr Zeit verbringt.
Der Anteil der Benutzereingriffe nimmt dramatisch zu, wenn der Benutzer vom Scrollen fasziniert ist.
Der Benutzer muss sich nicht mit dem Prozess des Herausfindens der Informationen befassen, da diese auf offensichtlichere Weise verfügbar sind.
In einigen Fällen können Sie eine Geschichte über das von Ihnen angebotene Produkt / die von Ihnen angebotene Dienstleistung erstellen, indem Sie andere Elemente auf dem Bildschirm animieren, z. B. das Logo oder das Menüsymbol.
Aus technischer Sicht
Sobald Sie das Parallaxen-Scrollen für eine Desktop-Version implementiert haben, kann ganz einfach dasselbe Framework für die mobile Website oder die Bildschirme verwendet werden.
Da das Code-Snippet einfach und wiederverwendbar ist, wenn Sie eine Marketingagentur oder ein Website-Dienstleister sind, wird dies beim Sammeln neuer Kunden mühelos.
Das Wissen über Parallaxen-Scrollen bringt mehr Fachwissen in Frontend-Frameworks wie CSS, JavaScript usw. mit sich.
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.
Um einen Parallax-Effekt zu erzielen, wird am häufigsten JavaScript verwendet. Ab diesem Kapitel werden wir die Konzepte von JavaScript und einige der Bibliotheken diskutieren, die zum Erreichen des Parallax-Bildlaufs verwendet werden.
Die Verwendung von reinem JavaScript ist sinnvoll, um die Leistung der Website optimal zu halten. Es gibt viele andere Vorteile der Verwendung von Bibliotheken unter Leistungsaspekten. Um die Code-Organisation besser zu verstehen, beginnen wir jedoch mit der reinen Implementierung der JavaScript-Parallaxe. Unterhaltsame Tatsache, manchmal wird auch reines JavaScript genanntvanilla JavaScript.
Parallaxen-Scrollen mit reinem JavaScript
Erstellen Sie zunächst eine HTML-Hauptdatei mit dem unten gezeigten Code. Die HTML-Seite besteht nur aus vier Überschriften.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
<script src = "myscripts.js"></script>
</head>
<body>
<section class = "parallax">
<h1>The First Scroll</h1>
</section>
<section class = "parallax">
<h1>The Second One</h1>
</section>
<section class = "parallax">
<h1>GoingOn !!</h1>
</section>
<section class = "parallax">
<h1>And we've reached the bottom!!</h1>
</section>
</body>
</html>Beachten Sie, dass wir in Zeile 4 für dieses Beispiel verwenden myscripts.js Datei, die im selben Ordner wie die HTML-Datei und die CSS-Datei gespeichert wird.
Bereiten wir nun unsere CSS-Datei wie unten gezeigt vor.
header {
height: 4em;
background: #845;
}
.parallax {
background-repeat: no-repeat;
background-size: cover;
}
.parallax h1 {
text-align: center;
margin: 0;
font-size: 2.5em;
letter-spacing: .2em;
color: red;
padding: 10rem 0;
mix-blend-mode: exclusion;
}
.parallax:nth-of-type(1) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(1) h1 {
padding: 15rem 0;
}
.parallax:nth-of-type(2) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(2) h1 {
padding: 12rem 0;
}
.parallax:nth-of-type(3) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(4) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}Nun kommt der JavaScript-Teil, erstellen Sie eine Datei im Editor und speichern Sie sie als myscripts.js .
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
window.addEventListener("scroll", function() {
var scrolledHeight= window.pageYOffset;
$$(".parallax").forEach(function(el,index,array) {
var limit = el.offsetTop+ el.offsetHeight;
if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {
el.style.backgroundPositionY= (scrolledHeight - el.offsetTop) /1.5+ "px";
} else {
el.style.backgroundPositionY= "0";
}
});
});Analyse des Codes
Lassen Sie uns den JavaScript-Code analysieren.
Code von line number 1 to 4 repräsentiert die Hilfsfunktion.
In Zeile 6 wählen wir unser Parallaxenelement aus und fügen hinzu scrollEreignis zum Fenster. Um zu bestimmen, wie viel Fläche gescrollt wird, verwenden wirscrolledHeightEigentum. Wenn der Bildschirm nach unten rollt,backgroundPositionY wird für das Parallaxenelement aktualisiert.
Um den Parallaxeeffekt zu verlangsamen, haben wir durch 1,5 geteilt. Diese Zahl kann in eine beliebige Zahl geändert werden.
Jetzt können Sie sehen, wie die Seite nach unten scrollt (siehe Abbildung unten).
Verwenden der ScrollMagic JavaScript Library
Wie im vorherigen Abschnitt erläutert, können wir zwar reines JavaScript verwenden, um Parallaxeeffekte zu erzielen, es gibt jedoch einige leistungsstarke JavaScript-Bibliotheken, die die Benutzererfahrung verbessern. ScrollMagic ist eine solche Bibliothek zum Erstellen von Parallaxen-Scroll-Interaktionen.
Lassen Sie uns anhand eines Beispiels, wie unten angegeben, mehr darüber diskutieren -
Note- In diesem Beispiel wird das CSS zur Vereinfachung in einer HTML-Datei gespeichert. Außerdem ist der JavaScript-Code im selben Dokument enthalten. Kurz gesagt, wir erstellen nur eine HTML-Datei und es werden ScrollMagic-Bibliotheken zusammen mit dem erforderlichen CSS referenziert.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<style type = "text/css">
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
</style>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:cyan">
<p>These are bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id="parallax2" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:yellow">
<p>Some More Bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id = "parallax3" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing2"></div>
<script>
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
</script>
</body>
</html>Wie im obigen Code gezeigt, haben wir JavaScript-Bibliotheksreferenzen von benötigt line 3 to 6. Der CSS-Code wird in den Zeilen 9 bis 19 angegeben.
Content Delivery Network
Skriptverweise von Zeile 3 bis 6 verweisen auf CDN-URLs (ScrollMagic Content Delivery Network). Die Verwendung eines CDN ist in der modernen Website-Entwicklung sinnvoll, da Sie die erforderlichen Bibliotheken laden können, ohne Ihre Website zu verlangsamen.
Wenn Anpassungen in den Bibliotheken erforderlich sind, müssten die Bibliotheken auf ihrem jeweiligen Server gehostet werden, um diese Effekte zu nutzen. Wenn Sie grundlegende Funktionen aus einer Bibliothek verwenden, ist es effizient, die CDN-URL zu verwenden.
Der obige HTML-Code zeigt ein Bild, das durch zwei Unterteilungen getrennt ist. Erste Division erscheint mit einer Überschrift -These are bricks und zweite Division erscheint mit - Some More Bricks.
Beachten Sie, dass wir im CSS-Code von Zeile 9 bis 19 nur die Position und den Stil für das jeweilige Parallaxendiv angeben.
Die Arbeit, diese weiche Parallaxe zu erzeugen scenewird von der ScrollMagic-Bibliothek durchgeführt. Wenn Sie in den Zeilen 43 bis 62 auf Skriptcode verweisen, wird ScrollMagic verwendetcontroller wird aufgerufen und a scene geschaffen.
Die Szenen leiten das DOM, um einen Parallaxeeffekt zu erzeugen, wenn 80% des Bildschirms belegt sind. JavaScript wird verwendet, um den Bildlaufauslöser zu verstehen. Als Ergebnis erhalten Sie auf dieser Seite eine schwebende Erfahrung.
Note - Wenn Sie das obige Bild als GIF-Bild betrachten, können Sie den glatten Effekt der Textunterteilungen nicht beobachten.
Animationen auslösen
Die Möglichkeiten, eine abwechslungsreiche Benutzererfahrung zu schaffen, sind mit der ScrollMagic Library endlos. Beachten Sie die unten angegebenen Codefragmente, um Animationen beim Scrollen auszulösen.
Beachten Sie, dass Sie dafür zwei Dateien * minus benötigen; eine HTML-Datei und eine CSS-Datei.
Erstellen Sie eine HTML-Datei mit dem unten gezeigten Code -
<html>
<head>
<link rel = "stylesheet" href = "style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div style = "height:450px;"></div>
<div id = "square" class = "square">This is it!</div>
<div style = "height:450px;"></div>
<script>
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})
.addTo(controller);
var scene = new ScrollMagic.Scene({triggerElement: '.square'})
.setClassToggle('.square', 'show')
.addTo(controller);
</script>
</body>
</html>Erstellen Sie nun eine CSS-Datei mit dem folgenden Code.
.square {
background: aqua;
margin: 0 auto;
display: block;
padding: 40px 0;
text-align: center;
color: #000;
font-size: 40px;
font-weight: bold;
opacity: 0;
transition: .3s;
width: 0%;
}
.square.show{
opacity: 1;
width: 100%;
}
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}Analyse des Codes
In Bezug auf HTML-Code beginnt der ScrollMagic-Code mit line 17 und geht weiter bis line 25. In diesem Abschnitt erstellen wir zwei ScrollMagic-Szenen. Die erste Szene ist für das Backsteinbild und die andere für die Banneranimation.
Wie in angegeben setTween Funktion ein line 20Wenn die Bildlaufaktion bei 40% der Bildschirmgröße ausgeführt wird, beginnt die nächste Szene, in der das Banner angezeigt wird. Das ist es!
Die Undurchsichtigkeit des div mit id - square wird in der CSS-Datei auf gesteuert line 10 und line 15.
Als Ergebnis sehen Sie die folgende Animation auf der Seite.
Horizontales Scrollen
Wir können auch Parallaxen-Bildlauf anwenden und einen horizontalen Bildlauf erzielen. Mit der Bibliothek ScrollMagic kann ein horizontaler Bildlaufeffekt erzeugt werden. Siehe den Code unten.
Obwohl der Code einfach ist, um einen horizontalen Bildlaufeffekt zu erzielen, benötigen wir eine Abfrage-Referenz, um die horizontale Bewegung von Bildschirmen zu erreichen. Details zu jQuery finden Sie im nächsten Kapitel. Befolgen Sie zunächst den unten angegebenen Code.
Wir werden drei separate Dateien erstellen - HTML-Datei für den Hauptcode, CSS-Datei für Stile und JS-Datei für ScrollMagic-Funktionsaufrufe.
Hier ist der Code für das HTML-Dokument.
<html>
<head>
<link rel = "stylesheet" href = "style.css">
</head>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
<script src = "animation.js"></script>
<body>
<div class = "wrapper" id = "js-wrapper">
<div class = "sections" id = "js-slideContainer">
<section class = "section">
<span class = "section__title" id = "title1">Scroll Once</span>
<span id = "trigger--title1"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title2">Do It Again</span>
<span id = "trigger--title2"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title3">Thank You!</span>
<span id = "trigger--title3"></span>
</div>
</div>
</body>
</html>Beachten Sie, dass wir drei Abschnitte haben, die nach dem Scrollen angezeigt werden. Die drei Abschnitte sind in den Zeilen 15, 19 und 23 mit den IDs title1, title2 und title3 gekennzeichnet.
Der Code für das CSS-Dokument ist unten angegeben -
body {
font-family: serif;
}
body, html {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.section {
height: 100%;
width: calc( 100% / 5 );
float: left;
position: relative;
}
.section:nth-child(1) {
background: green;
}
.section:nth-child(2) {
background: orange;
}
.section:nth-child(3) {
background: red;
}
.sections {
width: 500%;
height: 100%;
}
.section__title {
position: absolute;
top: 50%;
left: 50%;
font-size: 30px;
color: #fff;
}Analyse des Codes
Die Hintergrundfarben für die drei Bildschirme (oder Abschnitte) werden auf angezeigt lines 10, 22 und 25.
Wir berechnen die relative Breite jedes Bildschirms im Code ab line 13.
Der JavaScript-Code für ScrollMagic ist unten angegeben -
$(function () {
var controller = new ScrollMagic.Controller();
var horizontalSlide = new TimelineMax()
.to("#js-slideContainer", 1, {x: "-20%"})
.to("#js-slideContainer", 1, {x: "-40%"})
new ScrollMagic.Scene({
triggerElement: "#js-wrapper",
triggerHook: "onLeave",
duration: "400%"
})
.setPin("#js-wrapper")
.setTween(horizontalSlide)
.addTo(controller);
});Beachten Sie die triggerHookEigenschaft in Zeile 8. Diese Eigenschaft ist für die Bereitstellung des Bildlaufeffekts verantwortlich, wenn der Benutzer den Abschluss des Bildlaufereignisses erreicht. Die FunktionTimelineMax ist verantwortlich für die Bereitstellung des horizontalen Bildlaufeffekts für unsere Bildschirme.
Sobald Sie die entsprechenden Dateien erstellt haben, können Sie die horizontale Bildlaufanimation wie unten gezeigt sehen.
In den vorherigen Kapiteln haben wir verstanden, wie gute Effekte durch die Verwendung von JavaScript-Bibliotheken zur Website beitragen. In Verbindung mit Photoshop bietet JavaScript eine phänomenale Flexibilität und eine einfache Möglichkeit, Ihrer Website Parallaxen-Bildlauf hinzuzufügen.
In diesem Kapitel werden drei Photoshop-Plugins vorgestellt, um den Parallaxen-Bildlaufeffekt hinzuzufügen. Genau wie im vorherigen Kapitel für JavaScript beschrieben, werden wir Photoshop-Referenzen in unserem HTML-Code verwenden, um leistungsstarkes Photoshop-Parallaxen-Scrollen zu erstellen.
Ein wichtiger Punkt bei Photoshop-Plugins ist, dass die Plugins häufig nicht aktualisiert werden. Daher sollten Sie einige Nachforschungen anstellen, bevor Sie Plugins für das Parallaxen-Scrollen verwenden.
Parallax Scrollen mit einfachen Parallax.js
Mit Parallax.js können wir mithilfe des Photoshop-Plugins einen Parallax-Bildlaufeffekt ohne großen Aufwand erstellen. Um das jQuery-Plugin zu berücksichtigen, müssen High-End-Bibliotheken wie Bootstrap integriert werden. Beachten Sie, dass der Code in diesem Kapitel HTML5-Tags enthält.
Schauen wir uns die unten gezeigte HTML-Datei an -
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<body>
<section>
<div class = "container">
<h1>Example on Parallax.js</h1>
<p data-pg-collapsed>
This is an example of parallax scrolling using Parallax.js jQuery Plugin.
</p>
<br/>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-position = "top" data-bleed = "10"
data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
data-natural-width = "1600" data-natural-height = "800" >
</div>
<section>
<div class = "container">
<h2 id = "sampleLorem">Sample Text Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
<br/>
<br/>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
quis ligula lacinia aliquet. Mauris ipsum.
<br/>
<br/>
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
magna luctus suscipit.
<br/>
<br/>
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper.
<br/>
<br/>
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
blandit orci.
<br/>
<br/>
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
<br/>
<br/>
</p>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-bleed = "10" data-speed = "0.2"
data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
data-natural-width = "1600" data-natural-height = "801"
data-pg-name = "PARALLAX IMAGE 002">
</div>
</body>
</html>Analysecode
Die obigen Codefragmente zeigen den Code für eine Seite mit zwei Bildern und einem Beispieltext dazwischen.
Wie Sie sehen können, beginnt der Code mit <!DOCTYPE html>Dies ist die typische Methode, um Browsern mitzuteilen, dass der Code HTML5-basiert ist.
das <meta> Tags von line 4 to 6zeigt den Code, der zur Interpretation Maschine ist. Sie können die Auswirkungen dieses Codes nicht sehen. Wichtig hierbei ist - mitmeta Mit diesem Tag erhalten Webentwickler eine verbesserte Kontrolle über die angezeigten Daten.
Auch auf line 8 and 9Wir haben die CSS-Stylesheets zusammen mit Bootstrap hinzugefügt. Für eine bestimmte Schriftart und Typografie ist Bootstrap die weit verbreitete Bibliothek.
Lines 10 and 11Kümmern Sie sich um die Bibliotheken Photoshop und Parallax.js. Es ist wichtig, die Kontrolle über Parallax.js einzuschließen, damit Parallaxenbilder wirken. Sie werden finden könnendata-parallax Eigentum mit div auf line 21Dies reicht aus, um die Bibliothek parallax.js für den erforderlichen Parallaxeeffekt aufzurufen.
Der Parallaxeeffekt ist im Code an zu sehen lines 21 und line 40. Wichtige Eigenschaften, die diesen Effekt mit parallax.js bewirken, sind -data-parallax, data-image-src, data-natural-width, data-natural-height.
Mit der CSS-Datei müssen wir nur eine Eigenschaft angeben. Es ist wie unten gezeigt -
.parallax-container {
height: 500px;
width: 100%;
}Im obigen HTML-Code haben wir eine spezifische Struktur für CSS-Dateien erstellt. Wir werden einen Ordner namens habencss, welches CSS-Dateien haben wird - bootstrap.min.css und style.css.
Sobald alles mit den Dokumenten fertig ist, können Sie den Parallaxeeffekt wie unten gezeigt sehen -
Parallaxator mit Photoshop Plugin
Das beste Photoshop-Plugin für Parallaxator bietet Parallaxen-Bildlaufeffekte und ist einfach zu bedienen. Sie können das Parallaxator-Plugin, seine CSS- und JS-Dateien von diesem Link herunterladen - Parallaxator GitHub .
Sobald die CSS- und JS-Dateien heruntergeladen wurden, können Sie den unten gezeigten Code verwenden, um den HTML-Code zu erstellen.
<!DOCTYPE html>
<html>
<head>
<title>Parallaxator Plugin</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<link rel = "stylesheet" href = "fm.parallaxator.jquery.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "fm.parallaxator.jquery.js"></script>
</head>
<body>
<div class = "section1 parallaxator">
<img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
<h1 class = "mega_text parallax_child">Nature</h1>
</div>
<div class = "section2 parallaxator">
<img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
<h1 class = "mega_text parallax_child">
Architecture<br>
</h1>
</div>
<div class = "section3 parallaxator">
<img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
<h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
Architecture again!
</h1>
</div>
</body>
</html>Analysecode
Der Parallaxeeffekt wird von der Klasse parallax_child bereitgestellt, die mit jedem img-Tag bereitgestellt wird. Das parallax_child ist mit den unten angegebenen CSS- und JS-Dateien verbunden.
Damit der Parallaxator als Plugin funktioniert, haben wir fm.parallaxator.jquery.css und fm.parallaxator.jquery.js hinzugefügt. Diese Dateien müssen im selben Verzeichnis wie die HTML-Datei verfügbar sein.
Der Code für CSS lautet wie folgt:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.section1,.section2, .section3 {
border-bottom: 32px solid #fff;
padding-top: 40%;
}
.section1 {
background-color: #fdb;
}
.section2 {
background-color: #bdf;
}
.section3 {
background-color: #fbd;
}
.mega_text {
font-weight: bold;
font-size: 100px;
margin: 0;
text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
padding: 64px;
display: block;
}Aufgrund des obigen Codes können Sie den Parallaxeeffekt sehen.
Stellar.js jQuery-Plugin für Parallax Scrolling
Stellar.js ist eine weitere Ergänzung zur Liste der Parallaxe-Photoshop-Plugins. Obwohl es nicht mehr gewartet wird, können Entwickler, die seinen stabilen Build verwendet haben, problemlos den Parallax-Scrolling-Effekt verwenden. Es ist mit den neuesten Versionen von Photoshop kompatibel und einfach zu implementieren.
Sie müssen die neuesten jquery.stellar.js von der offiziellen Website für das Stellar.js- Plugin herunterladen . Erstellen Sie diese Plugin-Datei nach dem Herunterladen im selben Ordner wie Ihre HTML- und CSS-Dateien.
Schauen wir uns den HTML-Code an.
<!doctype html>
<html>
<head>
<title>Stellar.js Demo</title>
<link href = "style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "jquery.stellar.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</head>
<body>
<h1>Demo Site</h1>
<div class = "image architecture" data-stellar-background-ratio = "0.5">
<span>Architecture</span>
</div>
<div class = "image abstract" data-stellar-background-ratio = "0.5">
<span>Abstract</span>
</div>
<div class = "image landscape" data-stellar-background-ratio = "0.5">
<span>Landscape</span>
</div>
<div class = "image window" data-stellar-background-ratio = "0.5">
<span>Window</span>
</div>
</body>
</html>Analysecode
Damit Stellar.js funktioniert, haben wir die Bibliothek direkt nach dem Referenzieren des Photoshop-Plugins auf jquery.stellar.js hinzugefügt line 6.
Funktionen für die stellare Parallaxe werden im Skript-Tag von aufgerufen line 8 to line 15. Mit der Immobiliedata-stellar-background-ratio, Wir setzen einen Versatz für die angezeigten Bilder. Dies geschieht amlines 19,20,21 and 22.
Der CSS-Code ist unten angegeben -
body {
font-family: helvetica, arial;
padding-top: 40px;
}
h1 {
background-color: black;
color: white;
height: 40px;
font-size: 24px;
font-weight: normal;
left: 0;
line-height: 40px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
h1 a {
border-bottom: 1px solid white;
color: white;
display: inline-block;
line-height: 30px;
text-decoration: none;
}
.image {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.image span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.architecture {
background-image: url(img/architecture.jpg);
}
.abstract {
background-image: url(img/ruin.jpg);
}
.landscape {
background-image: url(img/landscape.jpg);
}
.window {
background-image: url(img/window.jpg);
}Sobald beide Dateien erstellt wurden und stellar.js die Plugin-Datei im selben Ordner enthalten ist, sollten Sie den Effekt wie im folgenden Screenshot sehen können -
Bootstrap ist ein beliebtes Framework mit vielen gebrauchsfertigen Komponenten zur Auswahl. Bootstrap kann den Code für die Implementierung des Parallaxen-Bildlaufs optimieren.
In diesem Kapitel mit einem Beispiel Lassen Sie uns diskutieren, wie wir die Jumbotron-Komponente verwenden, um das Parallaxen-Scrollen zu implementieren.
Ganze Seite mit Parallax Bootstrap4 Jumbotron
Stellen Sie sich eine Website vor, auf der dem Benutzer ein großes "Call-to-Action" -Feld mit Inhalten zu einem Rabatt oder Verkauf angezeigt wird. Normalerweise findet Jumbotron seine Anwendung an solchen Orten. Es ist eine große Box, die nützlich ist, um die Aufmerksamkeit des Benutzers auf sich zu ziehen.
Da wir nur eine Komponente des Bootstraps verwenden, erstellen wir für dieses Beispiel keine separate CSS-Datei. Lassen Sie uns direkt in den HTML-Code eintauchen.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<style>
.jumbotron{
margin:15px 30px 0px 30px;
border-radius:10px;
background:
linear-gradient(
rgba(0, 0, 250, 0.25),
rgba(125, 250, 250, 0.45)),
url(img/ruin.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:440px;
}
.page-scroll {
height:5000px;
}
.lead {
font-family:raleway;
font-weight:100;
margin-top:-10px;
}
</style>
</head>
<body>
<div class = "jumbotron jumbotron-fluid">
<div class = "container">
<h1 class = "display-2">Jumbotron Example</h1>
<p class = "lead">Example text for parallax using jumbotron</p>
</div>
</div>
<div class = "page-scroll"> </div>
</body>
</html>Analysecode
das line 64 Referenzen Bootstrap-Bibliothek. Wir geben den Rand und den Randradius für Jumbotron ab anline 8 to 11.
Wie wir weiter sehen können line 33Wir erstellen ein Div mit der Jumbotron-Klasse, um der großen Box zu zeigen, wo wir unser spezifisches Bild laden werden. Bitte beachten Sie, dass diesmal keine direkte URL für das Bild vorhanden ist. Wir werden das heruntergeladene Bild verwenden. Sie können beliebige hochauflösende Bilder für Ihr Beispiel herunterladen und in angebenline 16.
Die Ausgabe, die Sie sehen können, wenn Sie den oben angegebenen Code ausführen, wird unten gezeigt -
In diesem Tutorial haben wir verschiedene Bibliotheken zum Erstellen von Parallaxen-Scrollen untersucht. Wir haben alle Aspekte von der Grundstufe bis zur fortgeschrittenen Stufe abgedeckt, in denen wir CSS-Bootstrap verwendet haben, das für die Front-End-Entwicklung verwendet wurde. Wir empfehlen Ihnen, Ihre kreativen Fähigkeiten einzusetzen, um eine Webseite zu erstellen, die schwer zu ignorieren ist. Denken Sie daran, dass für das Parallaxen-Scrollen enorme Beispiele online sind, die Sie inspirieren.
Verwendung von Parallax Scrolling
Wie wir bereits in den einleitenden Kapiteln besprochen haben, können Sie das Parallaxen-Scrollen verwenden, um eine außergewöhnliche Benutzererfahrung zu erzielen. Hier sind einige Ideen für die Site, auf der Sie das Parallaxen-Scrollen einschließen können.
Website-Zeitleiste
Diese Arten von Websites haben normalerweise eine Geschichte über ein Produkt, ein Unternehmen oder etwas anderes zu erzählen. Sie können einen Parallaxeeffekt erstellen, um dem Besucher die Geschichte vorzustellen und ihn mit verschiedenen Animationen zu beschäftigen.
Für eine Timeline-Site lohnt es sich, einen Hintergrund zu erstellen und den Textinhalt im Vordergrund anzuzeigen. Sie können sich mit einem Grafikdesigner zusammenschließen, um Grafiken zu erstellen, die mit dem Hintergrund Hand in Hand gehen.
Mobile App-Website
Heutzutage ist die mobile App ein Muss für jedes Produkt- / Serviceangebot. Es gibt viele Startups, die nach einer Website für mobile Apps suchen, auf der erklärt wird, was die mobile App kann und was nicht.
Apples App Store, bekannt für seine strengen Richtlinien für die App-Erstellung, verlangt von der mobilen App eine Support-Website. Diese Website muss immer attraktiv und benutzerfreundlich sein.
Mit dem Parallax-Bildlauf können Sie ein mobiles Bild verwenden und verschiedene Arten von Funktionen anzeigen, während der Benutzer die Seite nach unten scrollt. Ein solches Beispiel wird bereits in Kapitel 4 dieses Tutorials erläutert.
Maus über Effekte
Sie können die Kraft des Parallaxen-Scrollens und des Mauszeigers verwenden, um die nächste Animationsebene zu erstellen. Mit der Maus können Sie die Bildlaufrichtung steuern und einen Parallaxeeffekt erzeugen.
Auf diese Weise gibt es viele Möglichkeiten, ein großartiges Erlebnis zu schaffen. Alles, was Sie brauchen, ist eine Idee und die richtigen Tools und Bibliotheken.
Zukunft der Web-Benutzeroberfläche
Mit der Kraft der Technologie und kreativen Elementen wie Parallaxen-Scrollen gibt es einen nie dagewesenen Wettbewerb, um erstaunliche Benutzererlebnisse zu schaffen. Dies ist nicht nur auf Websites beschränkt, sondern wurde auch auf mobile Websites ausgeweitet.
Während die Web-Benutzeroberfläche derzeit auf dem Höhepunkt ist, ist eine mit einem mobilen Gerät kompatible Webseite zeitaufwändig. Wie wir in den Beispielen für Bootstrap und jQuery gesehen haben, kann die Website kein langes Leben führen, wenn sie auf Handheld-Geräten nicht unterstützt wird.
Neben den vorhandenen Bibliotheken freut sich die Zukunft der Benutzererfahrung auch auf künstliche Intelligenz und virtuelle Realität. Es gibt einige Webseiten, die mit einem VR-Gerät angezeigt werden können. In einer solchen Situation ist es wirklich sinnvoll, mit den neuesten Plugins in Kontakt zu bleiben und nach neuen Plugins zu suchen.
Sie wenden das in diesem Tutorial gewonnene Wissen an, um das Beste aus der Benutzererfahrung herauszuholen. Ich wünsche Ihnen viel Glück und Erfolg für Ihre Webentwicklungsreise!