Parallax-Effekte sind nach wie vor einer der heißesten Trends im Webdesign. Diese animierte Bildlauftechnik wird ausgeführt, wenn sich Hintergrund und Vordergrund mit unterschiedlichen Geschwindigkeiten bewegen, während der Benutzer einen Bildlauf durchführt, so dass sich zwei unabhängige Ebenen gleichzeitig bewegen.
Dieser Effekt kann für eine beliebige Anzahl von Website-Typen verwendet werden und ist eine unterhaltsame Möglichkeit, die Einbindung der Benutzer zu fördern und zu erhöhen. Das Schöne an Parallax-Effekten ist, dass Sie sie nicht auf jeder Seite eines Designs verwenden müssen. Parallax-Scrolling ist eine großartige Homepage-Technik, mit der Benutzer zu Handlungsaufforderungen oder anderen Inhalten aufgerufen werden können.
Parallax-Effekte erzeugen ein Element der Tiefe und des Abstandes sowie eine stärkere Dreidimensionalität des Gefühls als bei anderen Techniken, sodass sich die Benutzer als Teil des Designs fühlen.
Der Nachteil von Parallax-Effekten ist, dass sie auf mobilen Geräten nicht immer funktionieren. (Es gibt jedoch auch einige Problemumgehungen im Tutorial am Ende dieses Artikels.)
Hier sind fünf Parallax-Effekte und -Stile zu berücksichtigen. (Klicken Sie auf die Links, um zu sehen, wie die einzelnen Animationen genau funktionieren.)
1. Animation zum Anzeigen von Änderungen
Verwenden Sie Parallax-Effekte, um Änderungen in einem Projekt anzuzeigen. Bewegungsebenen können eine Entfernung in Zeit, Raum oder Ort vermitteln.
Parallax-Effekte zeigen sich am besten, wenn sie mit dem Inhalt der Website arbeiten.
Porsche Evolution (oben) zeigt den zeitlichen Verlauf mit Änderungen des Hintergrunds und des Autos im Vordergrund jedes Bildes. (Erhöhen Sie den Ton und die Musik ändert sich auch um ein Jahrzehnt.)
Das Design sorgt dafür, dass die Benutzer scrollen, weil Sie sehen möchten, wie das Auto als nächstes aussehen wird. Diese Technik kann in chronologischer Reihenfolge (wie hier zu sehen) oder in umgekehrter chronologischer Reihenfolge arbeiten. Ein Schlüssel zum Funktionieren ist, dass diese Site in beide Richtungen funktioniert - selbst wenn die Musik zurückgeht - wenn Sie nach oben oder nach unten scrollen.
Sonance verwendet Parallaxe, um eine andere Art von Änderung anzuzeigen - die Änderung der Position im gesamten Design. Parallax-Effekte sind Teil des allgemeinen Navigationsmusters der Website, und es gibt einen Hinweis darauf, wo sich die Benutzer im Design (Ort) befinden.
2. Ermutigen Sie zum Scrollen
Der Grund, warum Parallaxeffekte helfen können, ist die Interaktion, weil sie zum Scrollen anregen, damit Benutzer länger mit dem Design interagieren können.
Viele Designs mit Parallaxeffekten enthalten eine "Scroll" -Eigenschaft. Anweisungen oder Hinweise direkt auf der Homepage, um diese Interaktion von Anfang an zu fördern. (Die Homepage von The Walking Dead Zombiefied enthält diese Anweisung auf der Seite vor dem oben abgebildeten Bild.)
Die Walking Dead-Website macht mit der Parallaxe etwas anderes, um die Interaktion zu fördern. Scrollen führt Benutzer über den Bildschirm, während sich der Charakter durch verschiedene Bedienfelder im Comic-Stil bewegt - und nicht auf und ab.
3. Bewegung und Farbe
Das Parallax-Scrolling kann am meisten verwendet werden, indem Sie Farbe in verschiedene Inhaltsbereiche einfügen. um Elemente oder Portfolio-Projekte zu präsentieren. Farbwechsel und Animationen können etwas Neues bedeuten.
Farbe ist auch ein aufmerksamkeitsstarkes Designtool, mit dessen Hilfe Benutzer eingebunden werden können.
Die Werkstatt oben verwendet eine weiße und graue Startkontur mit Parallaxen zwischen Elementen und Text. Eine zusätzliche Hover-Aktion erweckt jedes Projekt mit Farbe zum Leben. Die Kombination von Effekten funktioniert gut, da der Rest des Designs einfach ist und die Benutzer dazu angehalten werden, mit jedem einzelnen Element zu interagieren.
Lois Jeans verwendet einen anderen Parallax-Ansatz mit Farbe. Mit jeder neuen Farbe wird ein anderer Teil der Bekleidungskampagne hervorgehoben - Käufer können die Jeans an Modellen in verschiedenen natürlichen Umgebungen wie Feuer, Luft, Wasser und Erde sehen.
4. Machen Sie Informationen leichter zu verdauen
Parallax-Effekte können dazu beitragen, komplexe Informationen oder Textblöcke kleiner, lesbarer und leichter zu verdauen. Es ist ein interessantes Konzept, wenn Sie über das Verschieben von Text nachdenken. In der Praxis wurden jedoch Container bewegt, die den Typ enthalten.
Die obigen Beispiele zeigen zwei verschiedene Anwendungen dieses Konzepts.
Melanie David hat ein langes Intro über ihren Bildschirm. Die linke Seite mit dem Navigationselement - Info - bewegt sich nicht, während Benutzer den Text rechts durchblättern können. Wenn der Textblock endet, gehen beide Seiten der Seite zum nächsten Abschnitt. Dies ist eine großartige Lösung für einen Textblock, der länger als der Bereich für visuelle Inhalte ist.
Das Le Duc Restaurant verwendet einzelne Blöcke für verschiedene Bereiche des Menüs, die auf der Art und Weise wie Sie Lebensmittel lesen und bestellen würden, eingeblendet werden. Die Animationen sind einfach mit dem lustigen Fischhintergrund - der den Benutzern etwas über das Restaurant vermittelt - und das Menü ist leicht verdaulich.
5. Visualisieren Sie? Digital? Wirklichkeit
Eine der wichtigsten Anwendungen von Parallax-Effekten besteht darin, Benutzern zu helfen, etwas zu visualisieren, das sie sonst nicht sehen können. Bei mehr Designs wird eine Kombination aus dreidimensionaler Animation und Parallaxeanimation verwendet, um realistischere Erlebnisse zu erzeugen.
Diese 3D-Designs neigen dazu, eher in den Bereich eines Comic-Stils zu geraten, wie beispielsweise Madwell, aber sie können auch mehr VR-Feeling haben, wenn das Design mit einem bestimmten Gerätetyp funktioniert.
Eines der klassischen Beispiele für eine Site, die Parallax-Effekte verwendet, ist seit einiger Zeit auf der Seattle Space Needle-Website zu finden. Es verwendet eine aufwärts gerichtete Scroll-Technik, um zu simulieren, wie es aussieht, wenn Sie an die Spitze des Wahrzeichens fahren.
Durch das Scrollen durch Parallaxe wird die Skyline gegen das Innere des Gebäudes verschoben, mit einigen Call-to-Action-Nachrichten und einer großen Navigationsleiste, die anzeigt, wie hoch die Position oben ist. Das Design ist lehrreich, abenteuerlich und zeigt dem Benutzer etwas, das ohne den animierten Effekt kaum vorstellbar ist.
3 großartige Parallax-Ressourcen
Sind Sie bereit, einen Parallax-Effekt für Ihr nächstes Projekt zu erstellen? Mithilfe dieser Lernprogramme und Codeausschnitte können Sie Ihrem Design einen animierten Effekt hinzufügen, mit dem Sie Benutzer anziehen und länger in Kontakt bleiben können.
- So erstellen Sie einen Parallax-Scrolling-Effekt: Das w3schools-Lernprogramm führt Sie durch das Erstellen von Containereffekten und bietet Möglichkeiten, Medienabfragen zu verwenden, um auf mobilen Geräten einen ähnlichen Effekt zu erzielen.
- Parallax Scrolling Website Demo: Sehen Sie genau, wie diese Technik funktioniert, mit einer einfachen Demo und Erklärung.
- 15 Fesselnde Parallax-Effekte von CodePen: Die Liste zeigt einige großartige Parallax-Stifte, mit denen Sie Ihrer Kreativität freien Lauf lassen können, und Sie können mit jedem von ihnen spielen.
Fazit
Parallax-Effekte sind zwar trendy und unterhaltsam, aber nicht für jedes Projekt. Es ist auch wichtig zu bedenken, dass einige Benutzer auf einigen Geräten die Navigation auf einer Website, die viele Animationen enthält, Schwierigkeiten haben.
Machen Sie eine Bestandsaufnahme Ihrer Benutzer und ihrer Vorlieben, bevor Sie einen Parallax-Effekt hinzufügen. Beginnen Sie klein mit Parallaxe an einem Ort, z. B. auf der Startseite, und verfolgen Sie die Analyse, um zu sehen, ob sie für Sie funktioniert (mehr Zeit vor Ort, ein Hinweis darauf, dass sie funktioniert).
Verwenden Sie Parallaxe, wenn dies mit Ihren Inhalten und Nachrichten funktioniert. Diese trendige Technik sollte Spaß machen und damit interagieren.