18 Parallax-Scrolling-Tutorials mit jQuery & HTML5 – 2022
Veröffentlicht: 2022-03-17Die Parallaxe wird seit den späten 1940er Jahren verwendet und wird in jüngerer Zeit in Branchen wie Spielen eingesetzt, um einzigartige Spielerlebnisse für alle zu schaffen. Im Ernst, Parallaxe mag für Designer wie eine neue Sache klingen. Dennoch begleitet uns dieses Konzept schon so lange, dass Designer erst jetzt aufholen und einen Trend rund um diesen Scroll-Effekt etablieren. Um die Beschreibung der Parallaxe am besten einzugrenzen, handelt es sich um eine einzigartige Technik im Webdesign, die es einzelnen Webseitenkomponenten ermöglicht, in verschiedenen Zeitintervallen neben dem Benutzer zu scrollen, was dazu beiträgt, den Effekt eines sich bewegenden Hintergrunds hinter jedem Container/Raster/Kontext zu erzeugen.
Bei Colorlib haben wir unser Bestes gegeben, um der Parallaxe die bestmögliche Aufmerksamkeit zu schenken, während wir in jedem unserer Artikel eine Konsistenz einzigartiger Ansätze beibehalten:
Wir möchten nun die besten Parallax-Scrolling-Tutorials vorstellen, die die Verwendung von Technologien wie jQuery, JavaScript, HTML5 und CSS3 beinhalten. Wir haben uns auf Tutorials konzentriert, die für Neulinge im Webdesign geeignet sind, und einige Zwischenstücke, um die Grundlagen von Parallaxe und ihre Funktionsweise zu erklären.
Bevor wir uns mit unseren Tutorials und all dem beschäftigt haben, gibt es zwei Aspekte, die wir uns genauer ansehen sollten: die Auswirkungen von Parallax-Scrolling auf die Suchmaschinenoptimierung. Die Verwendung dynamischer Designfunktionen wird sich sicherlich auf die Art und Weise auswirken, wie Suchmaschinen Ihre Website verarbeiten, und Sie möchten sich nicht mit einer Funktion zufrieden geben, die sich negativ auf Ihren organischen Traffic auswirken könnte. Carla Dawson von Moz hat dieses Thema ausführlich behandelt. Die wichtigste Erkenntnis aus ihrem Beitrag ist die Auflistung von 3 einzigartigen Techniken, die Sie anwenden können, um Ihr Parallax-Design SEO-freundlicher zu machen. Alles beginnt, noch bevor Sie versuchen, einen funktionalen Parallaxeneffekt auf Ihr Design zu erzielen, zuerst die SEO-Methodik implementieren und sich dann auf die Erstellung des Inhalts konzentrieren. Auf diese Weise lassen Sie Raum für Suchmaschinen, um zu verstehen, wie Ihre Website funktioniert, aber erlauben Sie auch Robotern um den Inhalt zu verarbeiten.
Der zweite Aspekt ist die Benutzererfahrung des Parallax-Designs, ob es für alle Designs geeignet ist und welche Art von Problemen es verursachen kann. Dies ist eine eingehende Forschungsstudie über die Auswirkungen des Parallax-Designs auf die Benutzererfahrung, daher wird es einige Zeit dauern, dieses Dokument vollständig zu verarbeiten und zu verstehen. Die Studie umfasste zwei Gruppen von Personen, die beide Beispiel-Websites zum Erkunden erhielten: Parallaxe und Standard-Scrolling. Das Endergebnis war nicht überraschend, Benutzer genießen Parallax-Scrolling mehr, aber dies geht mit Verwirrung und allgemeinen Bedenken hinsichtlich der Benutzerfreundlichkeit einher. Sie sollten Benutzern immer Vorrang vor ausgefallenen Ergänzungen Ihrer Website-Designs geben. Wenn dies bedeutet, dass Sie einen professionellen Expertendesigner beauftragen, um Sie zu analysieren, sollten Sie diese Idee weiterverfolgen, insbesondere wenn Sie einen großen Geschäftsbetrieb führen. Nach unserer eigenen Erfahrung können kleine Websites normalerweise Parallax-Scrolling verwenden, und es hat keinen großen Einfluss auf die Benutzererfahrung oder die allgemeine Benutzerfreundlichkeit.
Nachdem wir diese beiden Themen behandelt haben, können wir damit beginnen, einige Techniken und Methoden zur Implementierung von Parallax-Scrolling und zur Erstellung Ihrer Parallax-Scrolling-Effekte zu erlernen. Das erste Tutorial stammt von Petr Tichy, der seit vielen Jahren im Frontend arbeitet und ein ausgewiesener Profi in diesem Bereich ist. Sie lernen die anfängliche Setup-Phase von Parallax kennen, wie Sie Animationseffekte hinzufügen, die ebenfalls Parallax-integriert sind, und wie Sie den einzelnen Animationen das richtige Timing zuweisen. Das Tutorial ist in gewisser Hinsicht etwas komplex und richtet sich daher an fortgeschrittene Entwickler, die über JavaScript-Vorkenntnisse verfügen. Im selben Tutorial finden Sie einen Link zu einem der früheren Tutorials von Petr über Parallaxe, das viel anfängerfreundlicher ist.
Ian Yates hat dieses Tutorial Anfang des Jahres geschrieben, und dies könnte eines der neuesten Tutorials zu diesem Thema sein, das wir in dieser Sammlung von Parallax-Tutorials vorstellen werden. Ian nimmt den Ansatz, sich von einer anderen Website inspirieren zu lassen, die eine großartige Parallax-Effekt-Kombination verwendet, und versucht, sie selbst nachzubilden. Das Einzige, er spricht hauptsächlich über vorgestellte Designs mit Parallax-Funktionen und erwähnt einen winzigen Schnipsel darüber, wie man mit JS und CSS einen einzigartigen Hintergrundeffekt erstellt.
Kunden haben nicht so viel Wissen über Designstandards, Kunden interessieren sich in der Regel nur für Trends und Dinge wie das Aussehen einer Website unglaublich cool und völlig einzigartig gegenüber allem, was als Konkurrenz bezeichnet werden könnte. Wenn Sie mit solchen Kunden arbeiten, ist ein kurzes Tutorial zum Erstellen einzigartiger Scrolling-Effekte für ein Design unerlässlich, und ich denke, wir haben hier eines, das die Arbeit einfach so erledigt. Sie lernen, wie Sie HTML5-Code strukturieren, der mit CSS3 gestaltet und dann mit jQuery in einen Parallax-Effekt eingebaut wird.
Das Tutorial von Script Tutorials hat bereits mehr als 17.000 Designer und Entwickler erreicht, diese Zahl hat uns fasziniert, da es bedeutet, dass das Tutorial wirklich funktionieren muss und ein reibungsloses Parallax-Bewegungserlebnis bieten sollte. Nach einigen lokalen Tests sieht es so aus, als wäre dies tatsächlich der Fall. Der übliche Parallax-Ansatz von HTML und CSS, und alles, was Sie wirklich tun müssen, ist, beide Codes zu kopieren und in Ihr Design einzufügen, und Sie sollten loslegen können. Wir können uns jedoch vorstellen, dass dies in Situationen, in denen Sie es für benutzerdefinierte Designs implementieren müssen, etwas schwieriger ist. Vielleicht müssen wir also weiter nach allgemeinen Tutorials suchen, die dabei helfen können.
Andy Shora könnte uns dabei vielleicht helfen. Seine Hauptziele sind die Schaffung eines Parallaxeneffekts, der die Leistung der Website nicht beeinträchtigt, was erreicht wird durch: Minimierung der Menge an DOM-Interaktionen für Scroll-Ereignisse und Verwendung der Hardwarebeschleunigung zur Steigerung der Leistung für mobile Geräte. Tatsächlich ist dies ein weiterer Leitfaden, um wirklich zu erfahren, wie mobile Geräte mit Parallax interagieren und was getan werden kann, um die maximale Leistung zu steigern, ohne an Qualität oder ansprechendem Design zu verlieren. Sie werden zwei verschiedene jQuery-Snippets erkunden, die verwendet werden, um leistungsoptimierte Parallax-Effekte für jedes Website-Design zu erstellen.
Da die Parallaxe eine so neue Technik ist (nun, seit ein paar Jahren, aber immer noch), stellt sie viele Herausforderungen an Entwickler, die Parallaxe für ältere Webbrowser implementieren möchten, der Prozess ist nicht so einfach und erfordert eine etwas Verständnis dafür, wie alte Browser mit neuen Webfunktionen arbeiten. Das Tutorial zeigt weiterhin gute und schlechte Beispiele zwischen Parallax-Websites und was im Analyseprozess gelernt werden kann. Es wird auch über verschiedene Parallaxenwinkel wie vertikal und horizontal gesprochen – die Möglichkeiten des modernen Webdesigns haben sich wirklich auf eine neue Ebene entwickelt. Sie werden etwas über die nützlichsten JavaScript-Bibliotheken im Zusammenhang mit Parallaxe lernen, und für jede von ihnen sind Dokumentationen und individuelle Tutorials online verfügbar. Wir wollten diese Bibliotheken selbst teilen, aber die Menge war nicht zu groß, also werden Sie etwas darüber lernen alle in diesem Tutorial. Dies ist eine wirklich wunderbare Ressource für alles, was mit Parallax zu tun hat, insbesondere für die Interaktionen und verschiedenen Möglichkeiten, einen dynamischen Scroll-Effekt zu erzielen.
So erzeugen Sie einen einfachen Parallax-Effekt
Obwohl Sara Vieira eine großartige Entwicklerin ist, spielt sie nicht mit komplexem Code oder Terminologie herum, wenn es um Themen wie Parallaxe geht. Sie zieht es vor, eine einfache Technik zu entwickeln, um das gewünschte Ergebnis zu erzielen, und lässt Sie mit dem von ihr geteilten Code in Ihrem eigenen Tempo experimentieren. Sie werden mit den großen Drei experimentieren: JS, HTML und CSS. Am besten experimentieren Sie auf einem lokalen Webserver oder in einem separaten Ordner auf Ihrem Live-Server und sehen, welche Ergebnisse Sie auf diese Weise erzielen können.
Der Parallax-Effekt mit jQuery
Das Schöne an diesem Tutorial ist, dass es bereits auf der angezeigten Seite implementiert ist, sodass Sie es nicht unbedingt in geschriebenem Text erklären müssen, sondern ein Beispiel in Form von Live-Code geben müssen. Sie können sich das HTML/CSS-Snippet schnappen und es mit dem jQuery-Snippet kombinieren, um denselben Parallaxeneffekt zu erzielen, den die angezeigte Seite hat. Mit einem kleinen Beschreibungsausschnitt (Kommentar), der auf der rechten Seite jedes Codeausschnitts verfügbar ist.
Letztendlich möchte man sich so weit wie möglich auf CSS verlassen. CSS bedeutet weitaus bessere Leistung und weniger Aufwand beim Umgang mit dynamischen Sprachen wie jQuery. Was Sie hier haben, ist ein einfaches CSS-Snippet, das Ihre Inhaltscontainer parallaxiert und das Inhaltserlebnis mit einem großartigen Leistungsbenchmark viel reichhaltiger macht.
Stellar.js ist eine relativ beliebte JavaScript-Bibliothek, die erstellt wurde, um Ihnen dabei zu helfen, Parallax-Effekte schnell zu Ihren Websites hinzuzufügen. Obwohl die Bibliothek im letzten Jahr nicht viel Entwicklung erfahren hat, wird sie immer noch aktiv von Entwicklern und Designern in der gesamten Community genutzt. Sie werden den Prozess untersuchen, wie Sie Stellar in Ihre Designs integrieren können, damit bestimmte Elemente den Parallax-Effekt erhalten. Eine Bibliothek ist definitiv eine sichere Wahl, um solche dynamischen Funktionen einzubinden, da sie bei Bedarf leicht vom Hauptentwicklungsworkflow getrennt werden kann.
Verwenden Sie Parallax, um Ihre WordPress-Site zum Platzen zu bringen
Parallax wird in so vielen verschiedenen Kontexten verwendet, dass man sich fragen muss, was die Benutzer dazu gebracht hat, zu dieser aufregenden Funktion zurückzukehren, und für viele war dieser Grund die Fähigkeit, bessere Geschichten zu erzählen, durch die Verwendung von reibungslosen Scroll-Animationen, die das können Leser von einem Teil der Geschichte zum anderen, mit dieser wunderbar fließenden Bewegung. Und was ist mit WordPress-Blogs, wie fügen wir Parallaxe zu WordPress hinzu, ohne einzigartige Themen zu verwenden, die die Funktion unterstützen? Wenn das Ihre einzige wirklich brennende Frage ist, finden Sie alle Antworten im folgenden Tutorial. Wir glauben, dass dies das umfassendste Parallax-Tutorial für WordPress-Blogs ist, und wir hoffen, dass Sie diese großartigen Effekte bald zu Ihren eigenen Blogs hinzufügen werden. Überspringen Sie die Einführung, wenn Sie bereits wissen, was Parallaxe tut. Ein Großteil des Handbuchs widmet sich der detaillierten Erklärung von Parallaxe. Vermeiden Sie also alles, was sich anfühlt, als wüssten Sie bereits darüber.
Was ist Wix? Es ist die führende kostenlose Plattform zum Erstellen von Websites im Internet, und diese Jungs sind schon seit Ewigkeiten im Geschäft! Dies ist kein großes Tutorial, sondern eine Einführung für Entwickler, die mit Kunden arbeiten, und für die Art von Kunden, die es vorziehen, Plattformen wie Wix zum Hosten und Erstellen ihrer Websites zu verwenden. Jetzt können Wix-Benutzer auch den Parallax-Effekt genießen, und sie haben viele gute Demos, die sie Ihnen zeigen können, um Sie anzulocken. Wir scherzen natürlich, die Verwendung von Wix kann so viel Zeit sparen, um ein einzigartiges Design zu erstellen, und das überraschenderweise Die Nachfrage nach Websites ist nicht zurückgegangen, obwohl Kunden diese großartigen Designs selbst erstellen könnten, wenn sie sich nur ein wenig mehr Zeit nehmen würden, um mehr über die Plattform zu erfahren, die sie zum Hosten ihrer Website verwenden. Scheuen Sie sich nicht, neuen Kunden die Möglichkeit zu bieten, ihre Website bei Wix oder einer anderen Website-Erstellungsplattform zu hosten. Es ist ein Schritt in die richtige Richtung, was die Wartung von Websites betrifft, und in einigen Fällen; Leistung auch.
Landschaftsparallaxe mit CSS
Sie haben viele Möglichkeiten für das Parallax-Design. Solange Sie also wissen, was Sie als Designer und Frontend-Entwickler tun, können Sie alles in einen Parallax-Effekt verwandeln und sogar eine Landschaft replizieren, indem Sie nur ein bisschen CSS und jQuery verwenden Magie! Dave Chenell führt Sie durch die Schritte, die notwendig sind, um einen Landschaftsdesign-Effekt in Parallaxe zu erzeugen.
So erstellen Sie eine mehrschichtige Parallax-Illustration mit CSS und Javascript
Der geschichtete Parallax-Effekt besteht darin, zwei Bilder übereinander zu verwenden, um ein bestimmtes visuelles Szenario zu entfalten. Dies wird das visuelle Erlebnis, das Ihre Benutzer mit Ihrem Design/Ihrer Website haben werden, weiter verbessern, und dies ist auch eine großartige Gelegenheit, die Möglichkeiten von handgezeichneter Kunst und ihrer Einbindung in das Website-Design zu erkunden, da Sie meistens etwas verwenden möchten die sich überlagern können und durchaus sinnvoll sind, wie Sie in der Demo-Vorschau sehen werden.
Reine CSS-Parallax-Websites
Nettes Einführungstutorial zum Erstellen eines soliden Scrolling-Effekts mit Parallaxe, wobei nichts als natives CSS verwendet wird.
Nachbildung des Firewatch-Parallax-Effekts
Parallax hat viele Namen, und es gibt definitiv eine treue Gruppe von Designern / Entwicklern, die den Parallax-Trend absolut hassen, aber was können Sie tun, es scheint für so viele zu funktionieren, also warum sollten Sie damit aufhören, Tutorials und Inhalte zu produzieren? wie man diesen Effekt in Echtzeit möglich macht. Das Tutorial, das wir hier haben, wird einen bestimmten Effekt von der Firewatch-Website nachbilden, um eine Art Landschaftseffekt zu erzeugen, kombiniert mit herunterfallenden Elementen, um eine zusätzliche Entfaltung von Inhalten zu ermöglichen. Es klingt zunächst knifflig, aber Hamish (Autor des Tutorials) kümmert sich gut darum, alles Schritt für Schritt zu erklären.
Was auch immer Ihre Anforderungen sind, wir sind der Meinung, dass die von uns aufgelisteten Tutorials absolut alle Aspekte abdecken, die mit diesem aufkommenden Webdesign-Trend einhergehen. Von einfachen Effekten über leistungsoptimierte Effekte bis hin zu einzigartigen Ansätzen für die Bereitstellung eines Inhaltserlebnisses, das länger als ein paar Minuten in Erinnerung bleibt. Vieles, was im Webdesign vor sich geht, hängt von der Inspiration ab und davon, wie man Benutzer und Leser mit einzigartigen Wendungen inspiriert, die durch Designkompetenz erreicht werden.