14 atemberaubende Parallax-Scrolling-Websites
Parallax-Scrolling 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 unvergesslichen Website führt.
Um zu zeigen, wie es gemacht werden sollte, finden Sie hier einige Websites, die die Technik für brillante Effekte einsetzen. In einigen Fällen ist das Parallaxen-Scrollen der Star der Show; In anderen Fällen wird lediglich ein Hauch von Tiefe hinzugefügt, sodass der Vordergrund ein wenig herausspringt.
Wenn Sie das Boot wirklich herausschieben möchten, zeigen diese beeindruckenden CSS-Animationsbeispiele eine weitere großartige Möglichkeit, Ihre Website zum Stehen zu bringen aus der Menge. Sie können sich auch unsere besten Webdesign-Tools ansehen, die Ihnen bei Ihren Designbemühungen helfen. Sehen wir uns jedoch zunächst einige Websites an, bei denen Parallaxen-Scrollen auf die richtige Weise verwendet wird.
Kunstgeschichte des Webdesigns
Die Geschichte der Kunst und des Webdesigns sind keine Themen, die Sie unbedingt zusammenstellen würden, aber sie sind wunderschön vereint in dieser Website zur Kunstgeschichte des Webdesigns, die die Zukunft des Webdesigns anhand der Kunst im Laufe der Zeit nachzeichnet.
Hier gibt es eine Reihe von Parallaxen-Bildlauftechniken, die bedeuten, dass Benutzer ständig überrascht und begeistert sind Es lohnt sich, ein wenig Zeit damit zu verbringen, diese Seite zu erkunden.
Der interaktive Qode-Katalog
Der interaktive Qode-Katalog verfügt über ein stilisiertes Navigationssystem für den unteren Text ein Bild für jeden Artikel. 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 Spritzen von Animationen wird ebenfalls effektiv verwendet.
Kanäle
Canals wurde von Marcus Brown entworfen und von Aristide Benoist entwickelt und nimmt Sie mit auf eine 400-jährige Reise durch die Geschichte der Amsterdamer Kanäle aus dem 17. Jahrhundert. Die Website wurde so gestaltet, dass sie ein redaktionelles Erlebnis bietet Wie das Blättern in einem üppigen Couchtischvolumen, und es nutzt die Parallaxe, um Ihre Aufmerksamkeit auf neue Abschnitte seiner Geschichte zu lenken und der Site einen subtilen Tiefeneffekt zu verleihen.
Die Geschichte von The Goonies
Jedem ab einem bestimmten Alter wird Liebe garantiert „80s te en Abenteuerfilm, The Goonies, und wenn Sie es sind, dann wird diese Seite sicher Ihre Nostalgiedrüsen zum Pochen bringen. The Story of The Goonies wurde von Joseph Berry mit WebFlow erstellt und ist eine Hommage an einen Retro-Klassiker, der Parallaxen-Scrolling verwendet, um Sie in die Geschichte einzubeziehen, Sie in die Charaktere einzuführen und den Modus des Films zu enthüllen.
Dogstudio
Die unmittelbare Hauptattraktion der Website von Dogstudio ist ein wunderschöner animierter 3D-Hund – oder ist es ein Wolf? – in der Mitte der Seite, der beim Scrollen skaliert und rotiert Sie bewegen sich die Parallaxenseite hinunter. 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.
ToyFight
ToyFight ist eine preisgekrönte Kreativagentur und Die Website macht sehr 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 Sagmeister-Referenz & Walsh). Die geschickte Verwendung von Parallaxe verstärkt den 3D-Effekt und wird in Kombination mit kräftigen, hellen, einfachen Hintergründen niemals überwältigend oder irritierend.
Diesel: BAD Guide
84.Paris hat diese beeindruckende Parallax-Website (und die dazugehörige Social-Media-Kampagne) zum Start von Diesels BAD-Duft erstellt. Auf der einseitigen Website werden die Regeln aufgeführt, aus denen sich der „BAD-Leitfaden“ zusammensetzt.
Der Benutzer kann dies 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 Tinder („Streichen Sie nach rechts, rechts, rechts, rechts – Sie werden sie sortieren“ später „) auf Instagram (“ Vergessen Sie nicht, donnerstags mit einem Ex in Kontakt zu treten #TBT „), begleitet von monochromen Illustrationen.
Firewatch
Eine der Die schönsten Beispiele für Parallaxen-Scrolling, die wir gesehen haben, sind diese Website für das Spiel Firewatch, die sechs bewegliche Ebenen 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 zu CodePen.
GitHub 404
Die 404-Seite von GitHub ist kein striktes Parallaxen-Scrollen, da der Effekt beim Wackeln der Maus im Gegensatz zum Scrollen auftritt Es ist eine wirklich unterhaltsame Seite, die Ebenen verwendet, um Tiefe zu verleihen. Im Gegensatz zur „richtigen“ Parallaxe bewegt sich der Hintergrund schneller als der Vordergrund und erzeugt ein verwirrendes, jenseitiges Gefühl.
Jess & Russ
Es ist keine Überraschung, dass die Hochzeitswebsite des Design-Power-Paares Russ Maschmeyer und Jessica Hische eine Schönheit ist. 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.
Machen Sie Ihr Geld wichtig
Finanzen und Geld sind kaum die interessantesten Themen. Die in New York ansässige Digitalagentur Firstborn ist mit dieser dynamischen Parallax-Scrolling-Website, auf der Sie Ihr Geld für die Credit Union des öffentlichen Dienstes verdienen, zufrieden.
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 Beantragung, sowie einen Taschenrechner, der anzeigt, wie viel Banken von den Einlagen der Kunden profitieren.
Madwell
Die in New York ansässige Design- und Entwicklungsagentur Madwell zeigt ihr Portfolio mit einer Reihe von Parallaxen-Scrolling-Effekten, um einen auffälligen 3D-Stil zu erstellen, der einen enormen Effekt erzielt Tiefe.
New York Times: Tomatendosen-Blues
Wie ziehen Sie in der heutigen Ära geringer Aufmerksamkeitsspannen und mundgerechter Medien Menschen für Langzeitjournalismus an? Tomato Can Blues ist eine großartige Antwort auf dieses Problem der New York Times und kombiniert einige clevere Webdesign-Techniken mit Geschichtenerzählen und Comic-inspirierten Illustrationen, die von Atilla Futaki erstellt wurden.
Eines der besten Beispiele für Parallax-Scrolling „Wie Sie gesehen haben, führt Sie der Artikel 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 den 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? ?
Schneefall
Eine der ersten Websites, die dies taten Der New York Times-Artikel „Snow Fall“ kombiniert wirklich eine Reihe verschiedener Elemente, darunter Parallax-Scrolling 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 eine innovative Art und Weise, die die Aufmerksamkeit der Design-Community weltweit auf sich zog.
- 19 wirklich nützlich Webdesign-Tutorials
- beste externe Festplatten
- Brillant gestaltete 404-Fehlerseiten