zurück zur Übersicht

Festtage der Schlemmer

Die Festtage sind vorbei, alle Geschenke sind ausgepackt und verteilt und die Neujahrsvorsätze warten darauf nicht eingehalten zu werden. Der Arbeitsalltag hat uns wieder fest im Griff und ich habe etwas Zeit um einen kleinen Rückblick auf unser vergangenes Weihnachts-Special zu machen. Wir wollten ermitteln, welche Weihnachtstypen unsere Kunden, Freunde und Bekannte sind. Aus dieser Idee ist die Website https://weihnachten.seerow.ch entstanden. Ein kleines Quiz welches dem Benutzer verrät welcher Weihnachtstyp er oder sie ist – natürlich alles mit einer gesunden Portion Humor. Nachdem wir am 14. Dezember die Website online gestellt hatten, waren wir sehr gespannt auf die Reaktionen der Benutzer. Und tatsächlich, zu unserer Überraschung und grosser Freude, nahmen viel mehr mehr Personen am Quiz teil, als wir erwartet hatten!

Der Schlemmer macht das Rennen

Unsere Idee war es, dass jeder Mitarbeiter von seerow einen Weihnachtstyp verkörpern soll. Natürlich waren wir vor dem Special gespannt, welcher von uns das Rennen machen wird. Und der Gewinner ist: Gil alias «Schlemmer», gefolgt von Moritz alias «Family-Guy» und Julian alias «Party-Maker».

29.16%
Schlemmer
20.13%
Family-Guy
17.70%
Party-Maker
11.80%
Ultra
7.29%
Grinch
5.55%
Gamer-Dude
4.34%
Ferien-Praktiker
2.60%
Sport-Lord
1.21%
Heilige

Dass der Schlemmer das Rennen gemacht hat, ist wohl nicht wirklich eine grosse Überraschung. Sind doch die Festtage für viele Leute, die Tage der grossen Familienessen und süssen Leckereien.

Vom Design bis zur Umsetzung

Seit dem 1. November 2016 arbeitet Özge als Interaction Designerin bei uns. Sie hat bei diesem Projekt sowohl alle Illustrationen, als auch das gesamte Konzept für die Seite entworfen und illustriert. Wir alle finden sie hat einen super Job gemacht! Für uns bei seerow war dies das erste Projekt bei dem alle Designs komplett intern umgesetzt wurden. Es war perfekt um verschiedene Ideen auszuprobieren und neue Grenzen auszuloten.

Bei der technischen Umsetzung war uns noch nicht von Anfang an klar, wie wir die Ideen von Özge umsetzen können. Darum war einiges an Research notwendig, um am Schluss das gewünschte Ergebnis zu erreichen. Ich möchte euch hier nicht vorenthalten, mit welchen Problemen wir während der Umsetzung am meisten zu kämpfen hatten und welche Erfahrungen wir gemacht haben.

Parallax & Horizontales Scrollen

Zugegeben, der Parallax-Effekt ist nich mehr so «state of the art» und wird heute nicht mehr so oft verwendet. Aber für unser Special gefiel uns genau dieser Effekt für die Reise durch die verschneite Winterlandschaft. Persönlich habe ich noch nie einen Parallax-Effekt selber umgesetzt und prompt machte ich einige Fehler, welche zu massiven Performance-Problemen führten. Die ganze Seite ist wie eine Art Slide-Show aufgebaut. Das heisst, nach einem Klick oder nach Absenden einer Antwort, wird jeweils der ganze Screen nach links geschoben. Ein Scrollen mit dem Mausrad oder über die Scrollbars ist nicht möglich.

Trotzdem hatte ich in einer ersten Version den Effekt mittels Scrolling via Javascript umgesetzt. Den Parallax-Effekt im Hintergrund hatte ich mit einer Animation der background-position erzielt. Später stellte sich heraus, das beides eine schlechte Idee war. Die Performance war so schlecht, dass mit nur zwei Slides keine Animation mehr flüssig lief.

Dank dem Artikel «Performant Parallaxing» fand ich dann eine geeignete Lösung. Der Artikel beschreibt wunderbar auf was man achten muss, wenn ein performanter Parallax-Effekt implementiert werden soll:

  • Verwende keine Scroll-Events oder background-position um Parallax-Animationen zu erstellen.
  • Verwende 3D Transforms um einen performanten Parallax-Effekt zu erzielen.

SVG-Animationen

Bei der Frage wieviel Gewicht man wohl während den Festtagen zulegen wird, kann der Benutzer mittels einer animierten Waage seine Antwort abgeben. Diese Illustration der Waage ist eine SVG-Grafik und sollte nun animiert werden. Mit CSS und ein bisschen Javascript ist das eigentlich auch sehr einfach.

Jedoch hatte ich Probleme damit, dass verschiedene Browser dass CSS-Property transform-origin nicht gleich interpretieren. Was macht transform-origin? Dieses Property bestimmt den Ursprung der Animation oder im Fall einer Rotation den Rotationspunkt.
Weitere Infos

Chrome

Der Rotationspunkt wird relativ zum oberen Element innerhalb der SVG-Grafik gesetzt.

Firefox

Der Rotationspunkt wird relativ zur ganzen Grafik gesetzt. In unserem Fall ist das relevant, weil wir einen maskierten Bereich haben. Die Grafik muss nun aber trotzdem so hoch sein wie der Radius der Drehscheibe.

Internet Explorer

Es ist wohl keine Überraschung, dass es nicht möglich ist im Internet Explorer das SVG und somit die Waage wie gewünscht zu animieren. Statt dem animierten SVG werden vorgerechnete PNG’s für jede Zahl angezeigt wenn man auf Plus oder Minus klickt.

Zum Schluss

Neben den vielen Erkenntnissen, die wir während der Umsetzung erhalten haben, haben wir uns aber am meisten über die vielen Personen gefreut, die am Quiz teilgenommen hatten! Uns schwirren schon neue Ideen für weitere solche Specials durch den Kopf. Wir freuen uns drauf!

zur Übersicht

Letzte Beiträge

Letzte Beiträge

Letzte Beiträge