Inhalt
- 13 atemberaubende Parallax-Scrolling-Websites
- 01. Webdesign Kunstgeschichte
- 02. Der interaktive Qode-Katalog
- 03. Kanäle
- 04. Die Geschichte der Goonies
- 05. Dogstudio
- 06. ToyFight
- 07. Diesel: BAD Guide
- 08. Feuerwache
- 13. Schneefall
Das Parallax-Scrollen ist einer dieser Webdesign-Trends, die einfach weitergehen, und es gibt Websites, die es für brillante Effekte verwenden. Bei dieser Technik wird der Hintergrund eines Website-Layouts so gestaltet, dass er sich beim Scrollen langsamer bewegt als der Vordergrund, wodurch ein 3D-ähnlicher Effekt entsteht.
Bei sparsamem Einsatz kann das Parallaxen-Scrollen ein subtiles Tiefenelement hinzufügen, das den Vordergrund hervorzuheben scheint. In einigen Fällen wird es als Hauptdarsteller der Show für eine große visuelle Wirkung verwendet. Die folgenden Beispiele zeigen, wie die Technik in unterschiedlichem Maße verwendet werden kann, um unverwechselbare und einprägsame Websites zu erstellen.
Weitere Informationen zum Webdesign finden Sie in unserem Leitfaden zu den besten Webdesign-Tools und den besten Drahtgitter-Tools, die Sie bei Ihren Designbemühungen unterstützen. Wenn Sie Lust haben, das Boot herauszuschieben, zeigen diese beeindruckenden CSS-Animationsbeispiele eine weitere großartige Möglichkeit, Ihre Website von der Masse abzuheben. Möchten Sie die Dinge einfach halten? Sie benötigen einen Website-Builder. Im Moment sind hier jedoch 13 Websites aufgeführt, die zeigen, wie das Parallaxen-Scrollen durchgeführt werden sollte.
13 atemberaubende Parallax-Scrolling-Websites
01. Webdesign Kunstgeschichte
Die Kunstgeschichte und die Geschichte des Webdesigns sind nicht zwei Themen, die Sie unbedingt zusammenstellen würden, aber sie sind wunderschön in der faszinierenden Website Webdesign-Kunstgeschichte kombiniert, die für Webdesign als Kunstform spricht.
Die Website zeichnet die Geschichte und Zukunft des Webdesigns nach, indem sie sich mit der Kunstgeschichte befasst und eine ganze Reihe von Parallaxen-Bildlauftechniken verwendet, um beim Scrollen auf der Seite ständige Überraschung und Freude zu bieten. Die verschiedenen Techniken kommen immer weiter, aber sie alle erfüllen einen Zweck und halten den Betrachter durchgehend mit der Erzählung beschäftigt. Mit einer Reihe von Links zu interessanten Beispielen ist dies eine Website, die es wert ist, etwas Zeit zum Erkunden und Verdauen zu verwenden.
02. Der interaktive Qode-Katalog
Der Qode Interactive Catalog beginnt mit dem Parallaxen-Scrollen im Intro. Scrollen Sie darüber hinaus und Sie gelangen zu einem stilisierten Menü, das ein Bild anzeigt, wenn über jeden WordPress-Themennamen gescrollt wird. Wenn Sie auf den Namen jedes Themas klicken, gelangen Sie zu einem Bildlaufportfolio mit Beispielanwendungen, in denen die Gestaltungsmöglichkeiten erläutert werden.
Es ist nicht die bahnbrechendste Verwendung des Parallaxen-Bildlaufs in dieser Liste, aber es zeigt, wie die Technik für einen klaren Zweck und zur Verbesserung der Benutzererfahrung verwendet werden kann. Durch das Parallaxen-Scrollen zeigt Qode eine Reihe von Anwendungen für jedes Thema auf eine Weise, die Wirkung zeigt. Eine Streuung der Animation wird auch auf dieser Site verwendet, um eine gute Wirkung zu erzielen.
03. Kanäle
Canals wurde von Marcus Brown entworfen und von Aristide Benoist entwickelt und führt uns auf eine 400-jährige Reise durch die Entstehung und Geschichte der Amsterdamer Kanäle, die im 17. Jahrhundert gebaut wurden. Die Website wurde entwickelt, um ein redaktionelles Erlebnis zu bieten, das mit dem Blättern in einem üppig produzierten Couchtisch vergleichbar ist. Das sanfte horizontale Scrollen nutzt die Parallaxe, um die Aufmerksamkeit auf jeden neuen Abschnitt der Geschichte zu lenken und der Site einen subtilen Eindruck von Tiefe zu verleihen.
04. Die Geschichte der Goonies
Jeder ab einem bestimmten Alter ist garantiert ein Fan des 80er-Jahre-Teenie-Abenteuerfilms The Goonies. Wenn Sie es sind, wird diese Website mit Sicherheit die Nostalgie zum Fließen bringen. The Story of The Goonies wurde von Joseph Berry mit WebFlow erstellt und ist eine liebevolle Hommage an einen Retro-Klassiker. Es verwendet Parallaxen-Scrolling, um die Zuschauer in die Geschichte einzubeziehen, die Charaktere vorzustellen und mehr über den Film zu erfahren.
05. Dogstudio
Die Hauptattraktion der Dogstudio-Website ist ein wunderschöner animierter 3D-Hund - oder ist es ein Wolf? - in der Mitte der Seite. Der animierte Eckzahn skaliert und dreht sich, 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 unsere Lieblingsberührung, dass sich der Hund irgendwann vor einem Teil der Seitenkopie dreht, einen Teil des Textes verdeckt und zusätzliche Tiefe schafft. Es ist eine sehr reibungslose Präsentation.
06. ToyFight
Die preisgekrönte Kreativagentur ToyFight hat jede Menge Spaß mit ihrer Website. Die Gründer Jonny Lander und Leigh Whipday scheinen in 3D-Figuren verwandelt zu sein, die in einer Reihe von Situationen auf der gesamten Website auftauchen (einschließlich der frechen Referenz von Sagmeister & Walsh oben). Eine clevere Verwendung des Parallaxen-Scrollings verstärkt den 3D-Effekt der Site, ohne dass sie jemals überwältigend oder irritierend wird. Gepaart mit kühnen, einfachen Hintergründen bietet es eine ansprechende Präsentation der Agentur.
07. Diesel: BAD Guide
Diese einseitige Website wurde für die Einführung von Diesels BAD-Duft für Männer entwickelt. Entworfen von 84.Paris, präsentiert es eine Reihe von Regeln, aus denen sich der „BAD Guide“ zusammensetzt, der von einer Social-Media-Kampagne begleitet wurde.
Der Benutzer kann die Umgebung 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 ("Wischen Sie nach rechts, rechts, rechts, 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
Wie auf der GitHub 404-Seite oben ist dies kein genaues Parallaxen-Scrollen, aber die Verwendung von schwebenden Ebenen, die durch Mauswackeln ausgelöst werden, verleiht der Website der New Yorker Design- und Entwicklungsagentur Madwell eine enorme Tiefe, um einen unvergesslichen 3D-Stil zu erstellen.
13. Schneefall
Ein weiteres Stück aus der New York Times, der Artikel Snow Fall, kombiniert eine Reihe verschiedener Ressourcen, darunter Parallaxen-Scrolling und Webvideo, um die Geschichte des Grauens einer Lawine am Tunnel Creek zu erzählen.
Es 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 und sie zu einer der ersten Zeitungsseiten machte, die die Grenzen dessen, was mit langformigen redaktionellen Inhalten online möglich ist, erweitert.
