ESPRIT Stories | Parallax Markenwebsite | 2013 | wysiwyg*
112-esprit-tab-desk-2013

ESPRIT Stories
Parallax Website

„Parallaxe” nennt sich der aktuell häufig anzutreffende Typus kleiner, origineller, erzählerisch abgeschlossener Microsites. In einer einzigen, langen Seite werden alle Inhalte arrangiert, welche sich der User per Scroll nacheinander erschließt. Der „Gag“ besteht in dem optischen Effekt der sich in unterschiedlichen Geschwindigkeiten und Richtungen bewegenden Elemente.

Als nun der Markenbereich von Esprit einen neuen, visuell spannenden Einstieg erhalten sollte, kam natürlich die Parallaxe ins Spiel. Dazu muss man wissen, dass Parallaxen technisch gesehen Einzelkunstwerke sind: Jedem einzelnen Element (Bild, Button, Text) wird eine Position und ein Bewegungsverlauf zugewiesen, der mit all den anderen, ineinander laufenden Elementen koordiniert werden muss. Verändert man ein Element, gerät das Gefüge durcheinander.

112-esprit-tab-desk-2013

Aufwendig aber schnell drehend – das ist Mode

Eine Parallaxe für die Esprit-Startseite muss natürlich deutlich flexibler funktionieren: Permanent und möglichst unkompliziert sind neue Kollektionen und Themen zu integrieren, außerdem verändert sich laufend die Priorität der Themen und damit auch deren Position und der gesamte szenische Ablauf. Darüberhinaus muss alles natürlich auf verschiedensten Endgeräten (PC, Handy, Tablet) und Browsern fehlerfrei laufen.

Um dies zu gewährleisten, entwickelte wysiwyg* eine modulare, komplett Javascript basierte Anwendung vollständig selbst. Hier definiert der Programmierer einmal die Anforderungen, aus denen die Anwendung das für alle Ausspielungen passende HTML erzeugt. Auf diese Weise läuft die Parallaxe sowohl im jahrealten Internet Explorer 6 als auch auf dem iPad (was besonders schwierig ist, weil dort das Scrollen anders funktioniert). Nun können auch umfangreiche Updates unkompliziert und kostensparend realisiert werden.

Ansehen
esprit.com/stories/
CMS
wysiwyg* custom
Framework
wysiwyg* custom
Design
ZORA