Рухомі лічильники без JavaScript

Чимало дизайнів лічильників тут рухаються. Цифра сама себе відраховує, панель сама себе промальовує, або щось падає на місце й вгамовується.

Жоден з них не використовує жодного рядка JavaScript.

Як це працює

Лічильники — це SVG, а SVG може нести власну таблицю стилів. Рух — це CSS-кейфрейми, записані прямо всередині самого зображення, тож усе приходить одним файлом, за один запит, і починає рухатися само собою. Браузер обробляє це так само, як і будь-яку іншу CSS-анімацію: на рівні композитора, не пробуджуючи жодного скрипта.

Практичний наслідок такий, що анімований лічильник коштує стільки ж, скільки й нерухомий. Вони важать приблизно від 1,8 до 3,2 КБ. Немає жодної бібліотеки, жодного другого запиту, і нічого, що затримувало б завантаження решти сторінки.

Види руху

Вони згруповані за тим, як вони рухаються, а не за тим, як виглядають, бо саме це, як виявляється, і є критерієм вибору:

• Побудова — лічильник промальовує себе в існування, штрих за штрихом.
• З вагою — щось падає, підстрибує і вгамовується. Рух із відчутною інерцією.
• Футуристичний, у русі — світіння, лінії сканування, дрейфуючий туман. Найефектніший з трьох.

Є й спокійне футуристичне сімейство — на випадок, якщо такий вигляд потрібен без руху. На момент написання цього тексту анімованими є п'ятдесят вісім дизайнів із наявних, а це значно більше, ніж хтось колись планував створити.

Якщо відвідувач попросив менше руху

В операційних системах є налаштування для зменшення анімації. Люди вмикають його через чутливість до руху, вестибулярні порушення, мігрені, а іноді просто тому, що рухомі елементи на сторінці втомлюють. Браузер передає цю перевагу кожній сторінці.

Ці лічильники враховують це налаштування. Якщо відвідувач попросив свою систему зменшити рух, анімація не запускається, і він отримує нерухомий лічильник із тим самим числом на ньому. Це перевірено дизайн за дизайном під час написання цього тексту, а не просто прийнято на віру.

Врахувати це коштує одного рядка в таблиці стилів, і саме це відрізняє прикрасу від дратівливого чинника.

Слово застереження проти їх використання

Рух приваблює погляд. У цьому весь сенс, і це ж є аргументом на користь стриманості.

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

Анімовані лічильники доречні там, де вони є частиною характеру сторінки: особистий сайт, сторінка проєкту, щось із дрібкою показовості. На сторінці, де хтось намагається читати, кращий той, що стоїть на місці.