Alle Jahre wieder bin süchtig nach der Nyan Nyan Cat. Dieses Mal wollte ich allerdings etwas sinnvolles mit der neuen Sucht machen.
Also entschloß ich mich, die Nyan Nyan Cat nachzubauen. Zunächst im Lego Digital Designer
https://www.instagram.com/p/BAF91pZr6e2/
und anschließend in Photoshop als einfache Keyframe-Animation:
Und zu guter letzt mit HTML und CSS. Da ich bereits für die Photoshop Keyframe-Animation alle 6 Frames des Originals nachgebaut habe, konnte ich die Grafiken für eine CSS-Animationen nutzen. Zunächst habe ich ein PNG-Sprite erstellt die so aussieht:
Mit von CSS3-Animations kann man eine Keyframe-Animation nachbauen. Das Ganze ist im folgenden Ergebnis ergänzt um eine einfache Hintergrundanimationen.
See the Pen Nyan Cat by Dennis Fischer (@ichderfisch) on CodePen.
Checkt den Codepen um zu erfahren, wie die Animation funktioniert.
Es fehlt noch der Regenbogen, aber der folgt bei Gelegenheit. Auch die Sterne sind anders als im Original, aber das ist meiner künstlerischen Freiheit geschuldet. Ich schreib ein Update, wenn es bei beidem Neuigkeiten gibt.
Ich frage mich derzeit, ob es wirklich notwendig ist, dass jeder Stern im Hintergrund ein eigenes DOM-Element sein muss, oder ob sich das auch eleganter lösen lässt.