Was ist eine Parallax-Scrolling-Website? Beispiele für fesselnde Websites

Parallax ist fest im Internet verankert, zieht immer mehr Designer an und gehört zu den Webdesign-Trends. Der Effekt wurde zuerst in Animationen und Videospielen wie Super Mario Bros. verwendet. Erst 2011 drang er mit der Einführung von HTML5 in das Internet ein. Durch geringfügige Manipulationen der grafischen Elemente kann der Parallax-Effekt ein Design zum Leben erwecken und den Benutzer in die auf einer bestimmten Website präsentierten Geschichten hineinziehen.

Was ist eine Parallax-Scrolling-Website?

Eine typische Website mit Parallax-Effekt ist eine, bei der sich der Hintergrund der Website langsamer bewegt als die Elemente im Vordergrund. Der visuelle Effekt, den wir erzielen, vermittelt den Eindruck von Bewegung und Tiefe, als ob es zwischen Vorder- und Hintergrund Raum gibt. Derzeit verwenden Designer Parallax, um eine Vielzahl von Effekten zu erzielen, wie z. B. das Vergrößern oder Verkleinern von Komponenten, das Ein- und Ausblenden oder das Drehen von 2D- oder 3D-Elementen.

Beispiele für Parallax-Websites

Da der Erfolg des Parallax-Effekts von der Ladezeit der Website abhängt, wird er für kleinere Websites empfohlen. Dies ist eine großartige Möglichkeit, eine originelle Landingpage für ein neues Produkt wie ein neues Schuhmodell, Frühstückszerealien oder ein neues Auto zu präsentieren. Für größere Projekte werden subtile Parallax-Effekte empfohlen, um die Belastung der Website zu minimieren und die Ladezeiten nicht zu beeinträchtigen. Designer und Frontend-Entwickler verwenden Parallax auch, um ihr Fachwissen und ihre reiche Vorstellungskraft zu demonstrieren.

1. TAG Heuer

Die Website von Tag Heuer ist ein großartiges Beispiel für die Verwendung von Parallax zur multidimensionalen Produktpräsentation - einzigartigen Uhren. Es verwendet 3D-Modelle, die erscheinen, rotieren und auf das Herunterscrollen der Website reagieren. So kann sich der Benutzer mit den Stärken des vorgestellten Produkts vertraut machen. Auch die Typografie ist interessant - große Bildunterschriften ergänzen die Produktpräsentationen und vermitteln den Eindruck eines TV-Werbespots.

2. Meadlight

Die Meadlight-Website ist eine angenehme Präsentation eines Honiggetränks. Parallax wurde hier auf verschiedene Weise eingesetzt. Neben der rotierenden Flasche, die uns auf der Website begleitet, haben die Designer auch die Parallax in der Beziehung der Typografie zum Hintergrund verwendet. Diese Tricks lassen die Website sehr leicht erscheinen, mit einem großen Raum zwischen den Elementen.

3. Greenhouse Agency

Manchmal ist Parallax ein Effekt, der die Website sanft leichter erscheinen lässt. Dies ist ein sehr guter Trick, wenn der Designer sich für große grafische Elemente und ausdrucksstarke Typografie entscheidet, wie im Fall von Greenhouse Agency, die Marken mit Marketing- und Verkaufsaktivitäten unterstützt.

4. Okalpha

Auf der Website von Okalpha - einem Animationsstudio - haben die Designer riesige geometrische Elemente in auffälligen Farben verwendet. Parallax wurde hingegen als Mittel zur Animation der Geometrie eingesetzt, die sich beim Bewegen der Website zurückzieht, um Platz für die Texte zu schaffen.

5. Longshot

Das Longshot Filmproduktionsstudio verwendet horizontalen Parallax, um Illustrationen zu präsentieren und ein räumliches Comic zu erreichen. Dieses eigenartige Menü führt zu einem Portfolio von Künstlerwerken. Bei dieser Website wurde Parallax auf verschiedenen Ebenen eingesetzt, um den Betrachter in die Atmosphäre des Entdeckens neuer Elemente einzuführen.

6. The Goonies

Die Website für den Film - The Goonies verwendet Parallax in mehreren Ebenen, wobei die dritte Ebene ein festes Element ist, das sich nicht bewegt. In der Ebene mit den Büschen haben die Designer einen Zoom-Effekt beim Scrollen verwendet, was automatisch den Eindruck vermittelt, dass wir uns der Ansicht hinter ihnen nähern. Darüber hinaus weicht das Logo durch das Ausblenden einer Ebene mit dem Text. Diese Arten von Effekten sind sehr einfach zu erzeugen und die Benutzerbeteiligung ist wesentlich größer.

7. Custo

Custo ist eine klassische Website, die der Präsentation eines Produkts - eines intelligenten Briefkastens - gewidmet ist. Die Bewegung beim Scrollen durch die Website ist sehr subtil, vermittelt aber den Eindruck einer dynamischen Website und verstärkt den Eindruck von hochwertiger Technologie. Parallax wurde verwendet, um die Funktionen des Produkts zu präsentieren. Auf der linken Seite des Bildschirms werden Ansichten der Anwendung gezeigt, während auf der rechten Seite die Funktionen beschrieben werden. Auf diese Weise achtet der Benutzer mehr auf die Informationen, die die Autoren der Website vermitteln möchten.

8. Porsche

Eine interessante Idee für die Verwendung von Parallax sind alle Arten von Geschichts-Websites, bei denen das Hauptelement die Zeitleiste ist. Porsche hat eine schöne Website erstellt, die aufeinanderfolgende Modelle des Autos ab 1920 präsentiert. Wenn wir die Website nach unten bewegen, enthüllt jede unserer Bewegungen weitere Bilder, die von unten kommen und zeigen, wie sich die Autos im Laufe der Jahrzehnte verändert haben. Die Voraussetzung für den Erfolg eines solchen Parallax ist zweifellos, dass die Fotos ähnlich aufgenommen werden und die Objekte die gleiche Größe haben. Dann haben wir das Gefühl, das Produkt zu ersetzen.

9. Anton & Irene

Bildende Künstler haben eine sehr schwierige Aufgabe, wenn sie ihr Portfolio online präsentieren möchten. Die Websites, auf denen sie sich und ihre Werke präsentieren, sollen eine unendliche Fantasie und Geschmackssinn demonstrieren. Anton & Irene - die kreativen Direktoren - gestalteten die Website mit Parallax, die sie entfernt, als ob sie etwas auf einem schwarzen Brett präsentieren würden. Die Schatten hinter ihren Figuren und die Parallax, die die Figuren seitlich bewegt, erzeugen einen schönen Eindruck des Raums hinter und zwischen ihnen.

10. Dior by Starck

Die Autoren dieser Website nutzten Parallax, um eine eigentümliche Geschichte über die Entstehung eines einzigartigen Stuhls zu erzählen. Während die Benutzer die Website nach unten bewegen, werden sie mit Hilfe von erscheinenden Bildunterschriften, Lichtern, Texten und Bildern in die Geschichte hineingezogen. Alles, was wir sehen, sind die Bilder, die sich gegeneinander bewegen, und die Verwendung von Transparenzen.

11. Blok Watches

Dies ist eine weitere Produkt-Website, diesmal mit Uhren für Kinder. Die Designer spielten mit Buchstaben und entschieden sich, sie mit Hilfe von Parallax in Bewegung zu setzen. Um den Effekt zu verstärken, verwendeten die Künstler Animationen der Uhren zusammen mit 3D-Elementen, die sich im Verhältnis zu den angrenzenden Absätzen scrollen. Dies verleiht der gesamten Website einen leichten, räumlichen und sogar dreidimensionalen Effekt.

Parallax-Scrolling-Website - Zusammenfassung

Wir haben 11 Websites mit unterschiedlichen Anwendungen von Parallax gesehen. Einige waren nur leichte Animationen, die die Website bereichern und Leichtigkeit verleihen, während andere Geschichten erzählten und uns in ihre Welt wie ein Film oder ein Computerspiel zogen. Dies zeigt, welches Potenzial Webdesigner durch die Anwendung eines sehr alten Prinzips der Animationserstellung gewonnen haben. Es ist jedoch wichtig, daran zu denken, dass diese Art von Lösung gut auf Desktop-Versionen von Websites funktioniert. Der zweite Aspekt, der den Erfolg einer solchen Lösung sicherstellt, ist die Menge an Informationen, die wir vermitteln möchten. Wenn wir wissen, dass es mehr Informationen auf unserer Webseite geben wird, ist es besser, wenn die Übergänge und Animationen weicher sind und dazu dienen, die Dynamik zu verbessern und Raum zu schaffen.

Fragen Sie sich, ob Parallax eine gute Lösung für Ihre Website ist? Unser UX- und UI-Design-Team wird Ihr Projekt analysieren und Sie beraten, welche Effekte es wert sind, integriert zu werden.