Contadores animados sem JavaScript

Um número considerável dos modelos de contador aqui presentes move-se. O número conta a subir sozinho, ou o painel desenha-se a si próprio, ou algo cai no lugar e assenta.

Nenhum deles usa uma única linha de JavaScript.

Como funciona

Os contadores são SVG, e o SVG pode conter a sua própria folha de estilos. O movimento é feito com keyframes de CSS escritos dentro da própria imagem, pelo que tudo chega como um único ficheiro, num único pedido, e começa a mover-se por si só. O navegador trata disto da mesma forma que trata qualquer outra animação CSS: no compositor, sem acordar nenhum script.

A consequência prática é que um contador animado custa o mesmo que um parado. Ficam, em geral, entre 1,8 e 3,2 KB. Não há biblioteca, não há um segundo pedido, e nada bloqueia o resto da página enquanto carrega.

Os tipos de movimento

Estão agrupados por como se movem, e não pelo aspeto que têm, porque é isso, no fundo, que acaba por pesar na escolha:

• A construir-se — o contador desenha-se a si próprio até existir, traço a traço.
• Com peso — algo cai, ressalta, e assenta. Movimento com inércia por trás.
• Futurista, em movimento — brilho, linhas de varrimento, névoa à deriva. O mais vistoso dos três.

Há também uma família futurista calma, para quando se quer esse aspeto sem o movimento. Cinquenta e oito dos modelos disponíveis animam-se neste momento, o que é bastante mais do que alguma vez se pretendeu construir.

Se um visitante pediu menos movimento

Os sistemas operativos têm uma opção para reduzir animações. As pessoas ativam-na por sensibilidade ao movimento, por distúrbios vestibulares, por enxaquecas, e por vezes só porque coisas a mexer numa página são cansativas. O navegador transmite essa preferência a todas as páginas.

Estes contadores respeitam-na. Se um visitante pediu ao seu sistema para reduzir o movimento, a animação não corre, e chega um contador parado com o mesmo número. Verificado modelo a modelo ao escrever isto, não presumido.

Custa uma linha numa folha de estilos respeitar isso, e é a diferença entre uma decoração e um incómodo.

Uma palavra contra usá-los

O movimento atrai o olhar. É essa a razão de ser, e é também o argumento para a contenção.

Se o contador não é aquilo de que a página trata — e na maioria das páginas não é — então algo que se mexe no canto está a competir com o conteúdo real pela única coisa que se esperava obter do visitante. Um contador parado diz o mesmo número sem pedir nada.

Os animados encaixam onde o contador faz parte do carácter da página: um site pessoal, uma página de projeto, algo com um certo espírito de espetáculo. Numa página onde alguém está a tentar ler, é melhor um que fique parado.