Inhalt
In diesem Jahr feiert McDonald's sein 40-jähriges Bestehen und feiert seine Kundenerinnerungen aus fünf Jahrzehnten in einer interaktiven Anwendung, die von Razorfish, einer unserer beliebtesten Designagenturen, auf Twitter erstellt wurde.
Erstellen Sie Ihre eigene Website mit diesen brillanten WordPress-Tutorials
Vollständig mit der HTML5-Canvas-API erstellt, fallen hier zwei Dinge besonders auf: die wunderschön animierte Benutzeroberfläche und die Typografie, die gut genug ist, um sie zu essen.
Wie sie es geschafft haben
Das Rasterlayout und die Poster wurden mit Pixi.js erstellt, einem 2D-WebGL-Renderer von Goodboy Digital.Darüber wurde ein benutzerdefinierter 3D-Renderer erstellt, der die Übergangsanimationen bereitstellt und auch auf Mobilgeräten eine reibungslose Funktion bietet. Das System, das die typografischen Poster erstellt, verwendet eine Analyse der natürlichen Sprache und der Syntax, um jeden Satz zu dekonstruieren und Wörter basierend auf der darin enthaltenen Stimmung zu kennzeichnen.
Der technische Partner von Goodboy, Mat Groves, sagt: "Wir haben die Stimmungsinformationen durch einen Algorithmus geleitet, der das Poster auslegt und es mit einigen maßgeschneiderten WebGL-Shadern rendert. Das Coole ist, dass dies alles in Echtzeit passiert ist!"
Benutzer können Erinnerungen auch über Spracheingaben in Browsern austauschen, die die Web Speech API unterstützen - eine weitere großartige Verbesserung auf einer Website voller überlegter Details. Die Website ist nicht mehr aktiv, kann jedoch auf der Portfolio-Website von Razorfish unter 40together.razorfishawards.com angezeigt werden.
Wörter: Peter Gasston
Peter Gasston ist ein erfahrener Webentwickler, der jetzt als Technologe und Frontend-Leiter im Reha-Studio arbeitet. Er ist Autor von The Book of CSS3 und The Modern Web.
