Анимирани броячи без JavaScript

Доста от дизайните на броячи тук се движат. Числото само се отброява нагоре, панелът сам се изрисува или нещо пада на мястото си и се успокоява.

Нито един от тях не използва дори един ред JavaScript.

Как работи това

Броячите са SVG, а SVG може да носи собствен стилов лист. Движението е CSS keyframes, записани в самото изображение, така че всичко пристига като един файл, с една заявка, и започва да се движи само. Браузърът го обработва така, както всяка друга CSS анимация: в композитора, без да събужда скрипт.

На практика това означава, че анимираният брояч струва колкото неподвижния. Размерът им е между около 1,8 и 3,2 KB. Няма библиотека, няма втора заявка и нищо не блокира останалата част от страницата, докато се зарежда.

Видовете движение

Групирани са по това как се движат, а не по това как изглеждат, защото именно от това всъщност зависи изборът:

• Изграждащи се — броячът сам се изрисува, щрих по щрих.
• С тежест — нещо пада, отскача и се успокоява. Движение с инерция зад себе си.
• Футуристични, в движение — сияние, сканиращи линии, носеща се мъгла. Най-ефектните от трите.

Има и спокойно футуристично семейство — за случаите, когато този вид е желан без движението. Към момента на писане петдесет и осем от предлаганите дизайни са анимирани, което е доста повече, отколкото някой е възнамерявал да направи.

Когато посетителят е поискал по-малко движение

Операционните системи имат настройка за намаляване на анимациите. Хората я включват заради чувствителност към движение, вестибуларни нарушения, мигрена, а понякога просто защото движещите се неща на страницата изморяват. Браузърът предава това предпочитание на всяка страница.

Тези броячи го зачитат. Ако посетителят е настроил системата си да намалява движението, анимацията не се изпълнява и той вижда неподвижен брояч със същото число. Проверено дизайн по дизайн при писането на тази статия, а не предположено.

Зачитането на това струва един ред в стиловия лист и е разликата между украса и досада.

Една дума против използването им

Движението привлича погледа. В това е целият му смисъл и това е и аргументът за сдържаност.

Ако страницата не е за брояча — а на повечето страници не е — нещо, което се движи в ъгъла, се състезава с истинското съдържание за вниманието на посетителя, а заради това съдържание съществува страницата. Неподвижният брояч казва същото число, без да иска нищо.

Използвайте анимираните там, където броячът е част от характера на страницата: личен сайт, страница на проект, нещо с малко артистичност. На страница, на която някой се опитва да чете, изберете неподвижен.