Bewegte Zähler ohne JavaScript

Eine ganze Reihe der hier angebotenen Zähler-Designs bewegt sich. Die Zahl zählt sich selbst hoch, das Panel zeichnet sich selbst auf, oder etwas fällt an seinen Platz und kommt zur Ruhe.

Keiner von ihnen verwendet eine einzige Zeile JavaScript.

Wie das funktioniert

Die Zähler sind SVG, und SVG kann ein eigenes Stylesheet mitführen. Die Bewegung besteht aus CSS-Keyframes, die im Bild selbst geschrieben stehen, sodass alles als eine Datei, in einer Anfrage ankommt und von selbst zu laufen beginnt. Der Browser behandelt das wie jede andere CSS-Animation: auf dem Compositor, ohne ein Skript zu wecken.

In der Praxis bedeutet das: Ein animierter Zähler kostet genauso viel wie ein unbewegter. Sie liegen zwischen etwa 1,8 und 3,2 KB. Es gibt keine Bibliothek, keine zweite Anfrage, und nichts, was den Rest der Seite beim Laden blockiert.

Die Arten der Bewegung

Gruppiert sind sie danach, wie sie sich bewegen, statt danach, wie sie aussehen, denn genau das erweist sich als das Kriterium, nach dem tatsächlich ausgewählt wird:

• Aufbauend – der Zähler zeichnet sich Strich für Strich selbst.
• Mit Gewicht – etwas fällt hinein, prallt ab und kommt zur Ruhe. Bewegung mit Trägheit dahinter.
• Futuristisch, in Bewegung – Leuchten, Scanlinien, treibender Nebel. Die auffälligste der drei Kategorien.

Es gibt auch eine ruhige futuristische Familie, für den Fall, dass dieser Look ohne die Bewegung gewünscht ist. Achtundfünfzig der angebotenen Designs animieren zum Zeitpunkt, an dem dies geschrieben wird – deutlich mehr, als sich ursprünglich jemand vorgenommen hatte.

Wenn ein Besucher weniger Bewegung wünscht

Betriebssysteme haben eine Einstellung, um Animationen zu reduzieren. Menschen schalten sie ein wegen Bewegungsempfindlichkeit, wegen vestibulärer Störungen, wegen Migräne, und manchmal einfach, weil sich bewegende Dinge auf einer Seite anstrengend sind. Der Browser gibt diese Präferenz an jede Seite weiter.

Diese Zähler respektieren das. Hat ein Besucher sein System auf reduzierte Bewegung eingestellt, läuft die Animation nicht, und er bekommt einen stehenden Zähler mit derselben Zahl darauf. Beim Schreiben dieses Beitrags Design für Design geprüft, nicht angenommen.

Das zu respektieren kostet eine Zeile im Stylesheet, und es ist der Unterschied zwischen einer Verzierung und einer Plage.

Ein Wort gegen ihre Verwendung

Bewegung zieht den Blick auf sich. Das ist genau ihr Sinn, und es ist zugleich das Argument für Zurückhaltung.

Wenn es auf einer Seite nicht um den Zähler geht – und auf den meisten Seiten geht es nicht darum –, dann konkurriert ein sich bewegendes Ding in der Ecke mit dem eigentlichen Inhalt um genau die eine Sache, um die es beim Besucher geht: seine Aufmerksamkeit. Ein stehender Zähler zeigt dieselbe Zahl, ohne um etwas zu bitten.

Die animierten Varianten passen dorthin, wo der Zähler Teil des Charakters der Seite ist: eine private Website, eine Projektseite, etwas mit ein bisschen Show. Auf einer Seite, auf der jemand lesen möchte, ist einer richtig, der stillhält.