Contadores animados sin JavaScript
Una buena parte de los diseños de contadores aquí se mueven. El número se cuenta a sí mismo, o el panel se dibuja solo, o algo cae en su lugar y se asienta.
Ninguno de ellos usa una sola línea de JavaScript.
Cómo funciona esto
Los contadores son SVG, y SVG puede llevar su propia hoja de estilos. El movimiento son fotogramas clave (keyframes) de CSS escritos dentro de la propia imagen, de modo que todo llega como un solo archivo, en una sola solicitud, y empieza a moverse por sí solo. El navegador lo gestiona igual que cualquier otra animación CSS: en el compositor, sin despertar ningún script.
La consecuencia práctica es que un contador animado cuesta lo mismo que uno estático. Pesan entre aproximadamente 1,8 y 3,2 KB. No hay biblioteca, no hay una segunda solicitud, y nada que bloquee el resto de la página mientras carga.
Los tipos de movimiento
Están agrupados por cómo se mueven en lugar de por su aspecto, porque resulta ser eso lo que realmente determina la elección:
- Progresivo — el contador se dibuja a sí mismo hasta existir, trazo a trazo.
- Con peso — algo cae, rebota y se asienta. Movimiento con inercia detrás.
- Futurista, en movimiento — resplandor, líneas de escaneo, niebla a la deriva. El más vistoso de los tres.
También hay una familia futurista tranquila, para el caso en que quieras ese aspecto sin el movimiento. Cincuenta y ocho de los diseños disponibles se animan en el momento de escribir esto, bastantes más de los que nadie se propuso construir.
Si un visitante pidió menos movimiento
Los sistemas operativos tienen una opción para reducir la animación. La gente la activa por sensibilidad al movimiento, por trastornos vestibulares, por migrañas, y a veces simplemente porque las cosas que se mueven en una página resultan agotadoras. El navegador transmite esa preferencia a cada página.
Estos contadores la respetan. Si un visitante ha pedido a su sistema que reduzca el movimiento, la animación no se ejecuta y recibe un contador estático con el mismo número. Comprobado diseño por diseño al escribir esto, no asumido.
Respetar eso cuesta una línea en una hoja de estilos, y es la diferencia entre una decoración y una molestia.
Una palabra en contra de usarlos
El movimiento atrae la mirada. Ese es todo el sentido de su existencia, y también es el argumento a favor de la moderación.
Si el contador no es de lo que trata la página —y en la mayoría de las páginas no lo es—, entonces algo que se mueve en la esquina compite con el contenido real por lo único que se esperaba obtener del visitante. Un contador estático dice el mismo número sin pedir nada.
Los animados encajan donde el contador forma parte del carácter de la página: un sitio personal, la página de un proyecto, algo con un poco de espectáculo. En una página donde alguien está intentando leer, elige uno que se quede quieto.