eDossier »Parallax Scrolling – Basics, Cases, Tutorials«

Webdesign-Trend: Parallax Scrolling

Wie kaum ein anderer Webdesign-Trend polarisiert der Parallaxen-Effekt seit 2011 die Branche. Doch die folgenden Beispiele zeigen, dass sich für bestimmte Aufgaben eindrucksvolle und performante Ergebnisse erzielen lassen. Der Boom parallaxer Websites hängt mit dem Aufstieg von CSS3 und HTML5 zusammen. Technologien, die dazu einluden, auch auf HTML-Seiten vermehrt neue Effekte auszuprobieren, die sich jetzt entschieden leichter realisieren ließen. Parallax Scrolling erlaubt eine Art 3-D-Effekt, der durch die sogenannte Bewegungsparallaxe entsteht. In ihr bewegen sich Objekte unterschiedlich schnell am Auge des Betrachters vorbei.

Onlineshop zu den Themen Feinkost und Kochen

»Das Auge shoppt mit«, sagt Kay Harney, Konzeptmanager von EstellaKochLust. Er traf mit einer handverlesenen Produktpalette aus mediterranen Waren von Familienbetrieben, ausgesuchten Zutaten und Designartikeln rund ums Kochen den Geschmacksnerv der Kundschaft. EstellaKochLust bietet das Besondere für jeden Tag. Dieser hohe Anspruch spiegelt sich im Onlineshop wieder, für den die Hamburger Digitalagentur Danhills das Konzept erstellt und umgesetzt hat. Parallel zum gesamten Onlineshop arbeitete ein spezielles Team rund um den Hamburger Künstler Andreas Klammt, den Danhills eigens für das Visual Design engagiert hatte, am Segment Inspiration«. In dieser eigenen Estella-Welt dominiert eine verspielte Animation aus verschiedenen Ebenen, denen vertikales Parallax Scrolling Tiefe verleiht.

Responsive HTML5-Webapp zum 25. Jahrestag des Mauerfalls

Der Rundfunk Berlin-Brandenburg beauftragte die Digitalagentur Moccu mit einer responsiven HTML5-Webapp für Smartphone, Tablet und PC, die die Geschichte des Mauerfalls für alle Geschichtsinteressierten wieder aufrollt. Die User können scrollend durch ein schier endloses parallaxes Filmarchiv zum Thema navigieren. PAGE berichtet von der Planung und den Tricks für ein müheloses Handling der Performance-Hürden.

Ausgangspunkt des Projekts war die Zweitverwertung des umfangreichen Archivmaterials des rbb respektive des ehemaligen Sender Freies Berlin (SFB) und des Ostdeutschen Rundfunks Brandenburg (ORB). Dieses Material sollte einer breiten Öffentlichkeit medienübergreifend und digital zugänglich gemacht werden. Norman Rusch und Andreas Hug erläutern, wie sie diese Aufgabe meisterten und den Go-Live des Projekts anstießen. Dabei waren die Automatisierung mit Grunt und Node.JS der Schlüssel, um effizient und sauber zu coden.

Webseite mit Parallax Scrolling und animiertem Storytelling

Bewegungsparallaxen können Webseiten zu Publikumsmagneten machen. Den Hype um das Parallax Scrolling löste 2011 die Firma Nike mit ihrer Seite »Better World« aus. Doch Vorsicht: Bei unsachgemäßem Einsatz besteht die Gefahr, dass Performance und Usability leiden. Henry Zeitler, Webdeveloper Frontend bei der netzkern AG in Düsseldorf, zeigt einen Weg, wie man schlanke Bewegungsparallaxen gestalten kann.

——————————————————————

Das PAGE eDossier 18.2014 enthält Beiträge aus WEAVE 01.2014 und 02.2014 (EVTs Januar und März 2014) im Originallayout. 25 Seiten