Движущиеся счётчики без JavaScript

Немалая часть дизайнов счётчиков здесь двигается. Число само отсчитывается вверх, панель сама прорисовывается, или что-то падает на место и успокаивается.

Ни один из них не использует ни строчки JavaScript.

Как это работает

Счётчики — это SVG-изображения, а SVG умеет нести собственную таблицу стилей. Движение — это CSS-кейфреймы, прописанные прямо внутри самого изображения, поэтому всё приходит одним файлом за один запрос и начинает двигаться само по себе. Браузер обрабатывает это так же, как любую другую CSS-анимацию: на уровне композитора, не пробуждая скрипт.

Практическое следствие — анимированный счётчик стоит столько же, сколько и неподвижный. Они весят примерно от 1,8 до 3,2 КБ. Никакой библиотеки, никакого второго запроса и ничего, что блокировало бы остальную часть страницы во время загрузки.

Виды движения

Они сгруппированы по тому, как они двигаются, а не по тому, как выглядят, — потому что на практике выбор делается именно по этому признаку:

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

Есть и категория «Футуристично, спокойно» — на случай, если нужен такой внешний вид без движения. На момент написания этого текста анимированы пятьдесят восемь из предложенных дизайнов, что заметно больше, чем кто-либо изначально планировал сделать.

Если посетитель попросил меньше движения

В операционных системах есть настройка для уменьшения анимации. Её включают из-за чувствительности к движению, из-за вестибулярных расстройств, из-за мигрени, а иногда просто потому, что движущиеся элементы на странице утомляют. Браузер передаёт эту настройку каждой странице.

Эти счётчики её учитывают. Если посетитель попросил свою систему уменьшить движение, анимация не запускается, и он получает неподвижный счётчик с тем же числом. Это проверено по каждому дизайну отдельно при написании этого текста, а не принято на веру.

Учесть это стоит одной строки в таблице стилей — и именно она отделяет украшение от раздражителя.

Слово против их использования

Движение привлекает взгляд. В этом весь его смысл, и в этом же — довод в пользу сдержанности.

Если счётчик — не то, о чём страница (а на большинстве страниц это действительно так), то нечто движущееся в углу соперничает с настоящим содержимым за единственное, ради чего посетитель и пришёл. Неподвижный счётчик показывает то же самое число, ничего не требуя взамен.

Анимированные уместны там, где счётчик — часть характера страницы: личный сайт, страница проекта, что-то с элементом показного эффекта. На странице, где кто-то пытается читать, лучше тот, что стоит на месте.