Des compteurs animés sans JavaScript

Un bon nombre des modèles de compteurs proposés ici bougent. Le chiffre s'incrémente tout seul, le panneau se dessine progressivement, ou quelque chose tombe en place et se stabilise.

Aucun d'entre eux n'utilise une seule ligne de JavaScript.

Comment cela fonctionne

Les compteurs sont en SVG, et le SVG peut embarquer sa propre feuille de style. Le mouvement est constitué de keyframes CSS écrites à l'intérieur même de l'image, si bien que le tout arrive en un seul fichier, en une seule requête, et se met en mouvement tout seul. Le navigateur le traite comme n'importe quelle autre animation CSS : au niveau du compositeur, sans réveiller le moindre script.

La conséquence pratique est qu'un compteur animé coûte le même prix qu'un compteur fixe. Ils pèsent environ entre 1,8 et 3,2 Ko. Il n'y a pas de bibliothèque, pas de seconde requête, et rien qui bloque le reste de la page pendant le chargement.

Les types de mouvement

Ils sont regroupés selon la façon dont ils bougent plutôt que selon leur apparence, car c'est en réalité le critère décisif :

• Construction — le compteur se dessine progressivement, trait par trait.
• Avec du poids — quelque chose tombe, rebondit et se stabilise. Un mouvement avec de l'inertie derrière lui.
• Futuriste, en mouvement — lueur, lignes de balayage, brume qui dérive. Le plus spectaculaire des trois.

Il existe aussi une famille futuriste calme, pour ce style sans le mouvement. Cinquante-huit des modèles proposés sont animés au moment où ces lignes sont écrites, ce qui est nettement plus que ce que quiconque avait prévu de construire au départ.

Si le visiteur a demandé moins de mouvement

Les systèmes d'exploitation disposent d'un réglage pour réduire les animations. Les gens l'activent en raison d'une sensibilité au mouvement, de troubles vestibulaires, de migraines, et parfois simplement parce que des éléments qui bougent sur une page sont fatigants. Le navigateur transmet cette préférence à chaque page.

Ces compteurs la respectent. Si un visiteur a demandé à son système de réduire les animations, l'animation ne s'exécute pas et il obtient un compteur fixe portant le même chiffre. Vérifié modèle par modèle au moment de la rédaction, et non simplement supposé.

Cela ne coûte qu'une ligne dans une feuille de style pour respecter ce choix, et c'est ce qui fait toute la différence entre une décoration et une nuisance.

Un mot contre leur usage

Le mouvement attire l'œil. C'est bien tout l'intérêt du procédé, et c'est aussi l'argument en faveur de la retenue.

Si le compteur n'est pas le sujet de la page — et sur la plupart des pages, ce n'est pas le cas — alors un élément qui bouge dans un coin entre en concurrence avec le contenu réel pour la seule chose que le visiteur avait à donner. Un compteur fixe indique le même chiffre sans rien demander.

Les modèles animés conviennent là où le compteur fait partie du caractère de la page : un site personnel, une page de projet, quelque chose avec un peu de mise en scène. Sur une page où quelqu'un essaie de lire, un modèle immobile vaut mieux.