Ich möchte ganz subtil Werbung für die Night of Open Knowledge im November in Lübeck machen.
Ich hatte ein bisschen Spaß mit dem Logo, das ist das Logo der Veranstaltung und wenn
ihr das so ein bisschen anguckt, dann stellt ihr fest, das Wasser bewegt sich und durch
das Wasser werden auch die Algen so ein bisschen sanft hin und her geschubbert und ich kann
hier ein bisschen die Fische ärgern, dann schwimmen sie weg und weil sie aber natürlich
pflichtbewusst Teil des Logos sind, kommen sie auch wieder brav zurück.
Damit kann man dann entsprechend auf unserer Webseite www.nook-lübeck.de spielen und bei
der Gelegenheit kann man sich dann auch überlegen, ob man dort Vorträge einreichen möchte für
diese sehr gute Veranstaltung im November.
So, wie funktioniert das Ganze?
Ich habe das Beispiel ein bisschen reduziert, damit wir uns hier erstmal nur über diese
Wasserwelle Gedanken machen können.
Das ist eine SVG-Grafik und in dieser SVG-Grafik befindet sich im Wesentlichen hier eine sehr
lange Fahrtdefinition, das ist diese geschlüngelte Kurve und die wird durch eine JavaScript-Animation
von rechts nach links durchs Bild bewegt.
Der coole Trick dabei ist, dass SVG Clip-Pfade beherrscht.
Das heißt, an ungefähr dieser Stelle, ja genau hier, habe ich definiert, dass wir von
dem Fahrt nur den Teil sehen, der sich auch tatsächlich in unserer Schüssel befindet.
Entsprechend haben wir diesen schönen Effekt, dass dort eine Welle ist.
Wir machen das mal ein bisschen sichtbar, indem wir den Clip-Pfad tatsächlich als Fahrt darstellen
und den Effekt dafür hier unten rausschmeißen.
Das heißt, jetzt sehen wir diese Ellipse hier tatsächlich und wenn ich das jetzt neu lade,
dann sehen wir, das ist der unsichtbare Kreis, der eben noch der Clip-Pfad war und jetzt
sehen wir, er ist furchtbar langweilig.
Das Ding da einfach durch und dann springt es rechts wieder hin und dadurch, dass das
zweimal exakt identisch die gleiche Welle ist, haben wir eine kontinuierliche Animation
an der Stelle.
Das nächste sind die Algen, die sich dort ein bisschen sanft im Wasser wiegen.
Das ist wieder eine CSS-Animation angewendet auf die SVG-Datei.
Das heißt, wir machen hier mit Hilfe des Javascript-Befehls "animate" auf das richtige Objekt und was
ich dann mache, ist eine "Skew-Transformation".
Ich habe das hier jetzt mal ein bisschen drastischer dargestellt, damit man auch tatsächlich den
Effekt sieht.
Das heißt, wir haben von -20° auf 20° diese entsprechende Verzerrung dort und das sieht
bei den Algen aus, als würden sie sich im Wasser wiegen.
Auf dem Rechteck daneben kann man den eigentlichen Effekt sehen und dann ist es in Wahrheit auch
noch eine Mischung aus X und Y, dann wabert es noch ein bisschen mehr.
Gut, zum Schluss: Was passiert den Fischen?
Das ist genau das gleiche wie mit den Algen, lediglich der Ankerpunkt der Transformation
ist ein anderer.
Während wir bei den Algen um diesen Punkt das Ganze transformieren, transformieren wir
es bei den Fischen um ihren Mittelpunkt, deswegen machen sie eine etwas sehr komische
Bewegung.
Und dann können sie sich dann schnell aus dem Bild verziehen, um dann zurückzukommen.
Ja, damit bin ich noch drastisch unter den fünf Minuten, das ist seltsam, das muss an
diesem Ort liegen.
Folgt also jetzt der Call-to-Action: Erstens, guckt euch die Nuke-Webseite ein, ihr müsst
da unbedingt einreichen, sehr gute Veranstaltung.
Zweitens, wer Vorschläge hat, wie man mit "Skew" und "Translate" und Ähnlichem eine
schönere Flossenschlagbewegung dieses Fisches hinkriegt, ich bin da offen für Optimierungen.
Ich glaube, da geht noch was.
was.
Applaus