14 atemberaubende Parallax-Scrolling-Websites
Parallax-Scrollen gibt es schon eine Weile, aber es ist einer dieser Webdesign-Trends, der einfach weitergeht. Beim Parallaxen-Scrollen bewegt sich der Hintergrund der Webseite im Website-Layout langsamer in den Vordergrund und erzeugt beim Scrollen einen 3D-Effekt. Bei sparsamer Verwendung kann es ein schönes, subtiles Element der Tiefe liefern, das zu einer unverwechselbaren und einprägsamen Website führt.
Um zu zeigen, wie es gemacht werden sollte, finden Sie hier einige Websites, die die Technik mit brillanter Wirkung einsetzen. In einigen Fällen ist das Parallaxen-Scrollen der Star der Show; in anderen fügt es einfach einen Hauch von Tiefe hinzu, der den Vordergrund ein wenig herausspringen lässt.
Wenn Sie Lust haben, das Boot wirklich rauszuschieben, sind diese beeindruckend CSS-Animation Beispiele zeigen eine weitere großartige Möglichkeit, Ihre Website von der Masse abzuheben. Und Sie können auch unser Bestes geben Webdesign-Tools Das wird Ihnen bei Ihren Designbemühungen helfen. Lassen Sie uns zunächst einige Websites betrachten, bei denen das Parallaxen-Scrollen auf die richtige Weise verwendet wird.
01. Webdesign Kunstgeschichte
Die Geschichte der Kunst und des Webdesigns sind keine Themen, die man unbedingt zusammenstellen würde, aber sie sind darin wunderbar vereint Webdesign Kunstgeschichte Website, die die Zukunft des Webdesigns nachzeichnet, indem sie Kunst durch die Zeit betrachtet.
Hier gibt es eine Reihe von Parallaxen-Bildlauftechniken, was bedeutet, dass Benutzer ständig überrascht und erfreut sind, wenn sie die Seite nach unten scrollen. Dieser ist es wert, ein bisschen Zeit damit zu verbringen, ihn zu erkunden.
02. Der interaktive Qode-Katalog
Das Interaktiver Qode-Katalog verfügt über ein stilisiertes unteres Textnavigationssystem, mit dem für jedes Element ein Bild angezeigt wird. Wenn Sie auf den Katalog klicken, wird ein horizontales Parallaxen-Scrollen angezeigt, mit dem eine Reihe von WordPress-Themen angezeigt werden. Es ist nicht die bahnbrechendste Verwendung des Parallaxen-Bildlaufs in dieser Liste, aber es erfüllt seinen Zweck gut. Ein Spritzer Animation wird ebenfalls gut eingesetzt.
03. Kanäle
Entworfen von Marcus Brown und entwickelt von Aristide Benoist, Kanäle nimmt Sie mit auf eine 400-jährige Reise durch die Geschichte der Amsterdamer Kanäle aus dem 17. Jahrhundert. Die Website wurde entwickelt, um ein redaktionelles Erlebnis zu bieten, wie das Durchblättern eines üppigen Couchtischvolumens, und nutzt die Parallaxe, um Ihre Aufmerksamkeit auf neue Abschnitte ihrer Geschichte zu lenken und der Website einen subtilen Tiefeneffekt zu verleihen.
04. Die Geschichte der Goonies
Jedem in einem bestimmten Alter wird garantiert der 80er-Jahre-Teenie-Abenteuerfilm The Goonies geliebt, und wenn Sie es sind, dann wird diese Seite Ihre Nostalgiedrüsen mit Sicherheit zum Pochen bringen. Erstellt von Joseph Berry mit WebFlow, Die Geschichte der Goonies ist eine Hommage an einen Retro-Klassiker, der Parallaxen-Scrolling verwendet, um Sie in die Geschichte einzubeziehen, Sie mit den Charakteren bekannt zu machen und den Modus des Films zu enthüllen.
05. Dogstudio
Die unmittelbare Hauptattraktion von Dogstudio Die Seite ist ein wunderschöner animierter 3D-Hund - oder ist es ein Wolf? - In der Mitte der Seite wird diese skaliert und gedreht, während Sie die Parallaxenseite nach unten scrollen. Die Beleuchtung ändert ihre Farbe, wenn Sie mit der Maus über die Titel der jüngsten Projekte von Dogstudio fahren. Vielleicht ist unser Lieblingsstück, wenn sie sich vor einem Teil der Seitenkopie dreht und einen Teil des Textes verdeckt.
06. ToyFight
ToyFight ist eine preisgekrönte Kreativagentur und ihre Website macht viel Spaß. Die Gründer Jonny Lander und Leigh Whipday haben sich in 3D-Figuren verwandelt, die in einer Reihe von Szenen auf der gesamten Website erscheinen (einschließlich dieser frechen Referenz von Sagmeister & Walsh). Die geschickte Verwendung von Parallaxe verstärkt den 3D-Effekt und wird in Kombination mit kräftigen, hellen und einfachen Hintergründen niemals überwältigend oder irritierend.
07. Diesel: BAD Guide
84.Paris hat diese beeindruckende Parallax-Website (und die dazugehörige Social-Media-Kampagne) erstellt, um die Einführung von Diesels BAD-Duft zu begleiten. Die einseitige Website enthält eine Reihe von Regeln, aus denen sich der „BAD Guide“ zusammensetzt.
Der Benutzer kann die Maus erkunden, indem er die Maus über die Parallaxenseite zieht, die wie eine Pinnwand mit Bildern zum Klicken angeordnet ist. Es gibt Ratschläge zu allem, von Zunder ('Nach rechts wischen, richtig, richtig, richtig - Sie werden sie später klären') bis zu Instagram ('Vergessen Sie nicht, donnerstags #TBT mit einem Ex in Kontakt zu treten'), begleitet von monochrome Illustrationen.
08. Feuerwache
Eines der schönsten Beispiele für Parallaxen-Scrollen, das wir je gesehen haben, ist diese Website für das Spiel Feueruhr , die sechs bewegliche Schichten verwendet, um ein Gefühl von Tiefe zu erzeugen. Es ist großartig, weil es kein Scroll-Hijacking gibt (was häufig mit dem Parallaxeeffekt einhergeht) und es nur oben auf der Seite verwendet wird. Der Rest der Website ist immer noch so, dass Sie die Informationen lesen können, ohne seekrank zu werden. Wenn Sie sehen möchten, wie es gemacht wird, finden Sie hier eine nette Demo CodePen .
09. GitHub 404
GitHubs 404-Seite Es handelt sich nicht ausschließlich um Parallaxen-Scrollen, da der Effekt beim Wackeln mit der Maus im Gegensatz zum Scrollen auftritt, aber es ist eine wirklich unterhaltsame Seite, bei der Ebenen verwendet werden, um die Tiefe zu erhöhen. Im Gegensatz zur „richtigen“ Parallaxe bewegt sich der Hintergrund schneller als der Vordergrund und erzeugt ein verwirrendes, jenseitiges Gefühl.
10. Jess & Russ
Kein Wunder, dass das Design-Power-Paar Russ Maschmeyer und Jessica Hische's Hochzeitswebsite ist eine Schönheit zu sehen. Die Site zeichnet ihre romantische Geschichte auf, wobei Parallaxen gescrollt werden, um den Illustrationen Tiefe zu verleihen. Sie haben 2012 geheiratet, aber die Website ist immer noch einen Blick wert.
11. Machen Sie Ihr Geld wichtig
Finanzen und Geld sind kaum die interessantesten Themen. Aber in New York ansässige Digitalagentur Erstgeborener ist mit dieser dynamischen Parallax-Scrolling-Website zufrieden Machen Sie Ihr Geld wichtig für die Public Service Credit Union.
Mit dem Ziel, der Öffentlichkeit die Vorteile eines Beitritts zu einer Kreditgenossenschaft zu vermitteln, anstatt eine Bank zu nutzen, bietet diese brillante Website alles von der Funktionsweise einer Kreditgenossenschaft über die Suche nach einer Kreditgenossenschaft bis hin zur Bewerbung und einen gerechten Taschenrechner Wie viel Banken profitieren von Kundeneinlagen?
12. Madwell
Design- und Entwicklungsagentur Madwell Das in New York ansässige Unternehmen zeigt sein Portfolio mit einer Reihe von Parallaxen-Scrolling-Effekten, um einen auffälligen 3D-Stil zu erstellen, der eine enorme Tiefe verleiht.
13. New York Times: Tomatendose Blues
Wie ziehen Sie in der heutigen Zeit geringer Aufmerksamkeitsspannen und mundgerechter Medien Menschen für Langzeitjournalismus an? Tomatendose Blues ist eine großartige Antwort auf dieses Problem der New York Times, die einige clevere Webdesign-Techniken mit Geschichtenerzählen und Comic-inspirierten Illustrationen kombiniert, die von Atilla Futaki erstellt wurden.
Der Artikel ist eines der besten Beispiele für Parallaxen-Scrolling, das wir je gesehen haben. Er führt Sie durch die Geschichte eines Käfigkämpfers, der von Mary Pilon geschrieben wurde. Während Sie durch den Inhalt scrollen, werden die Illustrationen mit cleveren Animationen und Änderungen lebendig, sodass Sie vollständig in den Inhalt eintauchen können.
Futakis Illustrationen basierten auf Polizeiaufzeichnungen, Zeugenaussagen, Fotos und Notizen des Reporters, und die Liebe zum Detail scheint durch. Alles in allem ist es ein großartiges Leseerlebnis - ist dies die Zukunft des Online-Journalismus?
14. Schneefall
Die New York Times ist eine der ersten Websites, die wirklich die Grenzen dessen überschreitet, was Sie mit redaktionellen Langform-Inhalten online tun können. Schneefall Der Artikel kombiniert eine Reihe verschiedener Elemente, einschließlich Parallaxen-Scrollen und Webvideo.
Der Artikel über den Horror einer Lawine am Tunnel Creek wurde im Dezember 2012 online veröffentlicht, ist aber immer noch ein gutes Beispiel dafür, was Sie mit Parallaxen-Scrollen tun können. Die Zeitung präsentierte den mit Pulitzer ausgezeichneten Artikel auf innovative Weise, die die Aufmerksamkeit der Design-Community weltweit auf sich zog.
Zum Thema passende Artikel:
