Wer diese Website am Computer besucht, trifft am Ende jeder Seite auf Captain: einen großen, hellen Hund mit dunkler Maske, der vor seiner Hütte döst, Bällen hinterherjagt und auch mal brummt, wenn man ihm etwas wegnimmt. Captain gibt es wirklich – er ist mein junger Kangal. Und seine digitale Version ist eine Tech-Demo dafür, was mit Webtechnik heute möglich ist.
Gezeichnet in SVG
Captain besteht nicht aus Bildern oder Videos, sondern aus SVG – Vektorgrafik, die direkt im Browser gezeichnet wird. Kopf, Kiefer, Beine, Rute und sogar die Brauen sind eigene Teile, die sich unabhängig bewegen lassen. So kann er sitzen, stehen, laufen, liegen und den Kopf drehen, um einem Ball mit den Augen zu folgen.
Der Vorteil: Die Zeichnung ist in jeder Größe gestochen scharf und trotzdem klein. Eine Bildsequenz in vergleichbarer Qualität wäre um ein Vielfaches größer.
Bewegung mit CSS und JavaScript
Einfache, wiederkehrende Bewegungen wie das Atmen übernimmt CSS. Alles, was auf Besucher reagiert, steuert schlankes JavaScript: Wohin läuft er? Hat er gerade Hunger? Will er lieber schlafen? Dafür gibt es keine Animations-Bibliothek und kein Framework – nur eigenen Code, der genau das tut, was er soll.
Rücksichtsvoll: Wer in seinem System „Bewegung reduzieren“ eingestellt hat, bekommt eine ruhige Fassung. Und Ton gibt es erst, wenn man selbst mit Captain etwas tut.
Eine echte Stimme
Captains Bellen, Brummen und Schnüffeln sind echte Aufnahmen von ihm. Damit sich das Maul passend zur Lautstärke öffnet, wertet der Browser die Tonaufnahme in Echtzeit aus – leises Brummen ergibt nur einen Spalt, lautes Bellen ein weit geöffnetes Maul.
Performance: Erst laden, wenn er gebraucht wird
Ein Maskottchen darf die eigentliche Seite nicht ausbremsen. Deshalb kommt beim Aufruf einer Seite nur ein winziger Lader mit. Erst wenn Sie in die Nähe von Captains Bereich scrollen, wird der Rest nachgeladen. Bis dahin hält ein Platzhalter mit fester Höhe den Platz frei, damit nichts verrutscht. Auf dem Handy bleibt Captain vorerst ganz weg – dort zählt jede Millisekunde.
- nichts lädt, bevor es gebraucht wird
- keine fremden Bibliotheken, keine externen Dienste
- Geräusche werden erst geladen, wenn Captain wirklich etwas „sagt“
- im Hintergrund-Tab ruht alles
Der Garten
Über das Schild an seiner Hütte geht es in Captains Garten. Dort richtet sich die Kulisse nach Uhrzeit und Jahreszeit: Die Sonne geht auf und unter, nachts brennt Licht in den Fenstern, im Winter liegt Schnee. Auch das ist eine einzige Vektorgrafik, die sich per Code verändert.
Warum das Ganze?
Captain zeigt im Kleinen, wie ich arbeite: mit Liebe zum Detail, mit Blick auf Ladezeit und Barrierefreiheit – und ohne Abhängigkeiten, die später Probleme machen. Eine Website darf Persönlichkeit haben, ohne langsamer zu werden. Mehr über Captain und mich lesen Sie auf der Seite Über mich.
