Penghitung animasi tanpa JavaScript

Cukup banyak desain penghitung di sini yang bergerak. Angkanya bertambah sendiri, atau panelnya tergambar sendiri, atau sesuatu jatuh ke tempatnya lalu diam.

Tidak satu pun yang menggunakan JavaScript, bahkan satu baris pun.

Cara kerjanya

Penghitung ini berupa SVG, dan SVG dapat membawa stylesheet-nya sendiri. Gerakannya berupa keyframe CSS yang ditulis di dalam gambar itu sendiri, sehingga semuanya tiba sebagai satu file, dalam satu permintaan, dan mulai bergerak dengan sendirinya. Browser menanganinya seperti animasi CSS lainnya: di compositor, tanpa membangunkan skrip.

Akibat praktisnya, penghitung animasi sama ringannya dengan penghitung diam. Ukurannya kira-kira antara 1,8 dan 3,2 KB. Tidak ada pustaka, tidak ada permintaan kedua, dan tidak ada yang menghambat bagian halaman lainnya saat dimuat.

Jenis-jenis gerakan

Desain-desain ini dikelompokkan berdasarkan cara bergeraknya, bukan berdasarkan tampilannya, karena ternyata itulah yang benar-benar menentukan pilihan:

• Tersusun — penghitung menggambar dirinya sendiri hingga utuh, goresan demi goresan.
• Berbobot — sesuatu jatuh, memantul, lalu diam. Gerakan dengan inersia di belakangnya.
• Futuristik, bergerak — cahaya berpendar, garis pindai, kabut yang melayang. Yang paling mencolok dari ketiganya.

Ada juga kelompok futuristik yang tenang, untuk kasus ketika tampilan itu diinginkan tanpa gerakan. Saat artikel ini ditulis, lima puluh delapan desain yang tersedia beranimasi, jauh lebih banyak daripada yang semula direncanakan siapa pun.

Jika pengunjung meminta gerakan yang lebih sedikit

Sistem operasi memiliki pengaturan untuk mengurangi animasi. Orang mengaktifkannya karena kepekaan terhadap gerakan, gangguan vestibular, migrain, dan terkadang hanya karena benda yang bergerak di halaman itu melelahkan. Browser meneruskan preferensi tersebut ke setiap halaman.

Penghitung ini menghormatinya. Jika pengunjung telah meminta sistemnya untuk mengurangi gerakan, animasi tidak berjalan dan mereka mendapatkan penghitung diam dengan angka yang sama. Hal ini diperiksa satu per satu untuk setiap desain saat artikel ini ditulis, bukan diasumsikan.

Menghormati hal itu hanya membutuhkan satu baris dalam stylesheet, dan itulah yang membedakan hiasan dari gangguan.

Alasan untuk tidak menggunakannya

Gerakan menarik perhatian mata. Itulah tujuan utamanya, dan itu pula alasan untuk menahan diri.

Jika penghitung bukan inti halaman — dan di sebagian besar halaman memang bukan — maka sesuatu yang bergerak di pojok akan bersaing dengan konten sebenarnya untuk merebut perhatian pengunjung, padahal konten itulah tujuan halaman tersebut. Penghitung diam menyampaikan angka yang sama tanpa menuntut apa pun.

Gunakan penghitung animasi jika penghitung merupakan bagian dari karakter halaman: situs pribadi, halaman proyek, sesuatu yang memang sedikit ingin tampil. Di halaman tempat seseorang sedang berusaha membaca, pilihlah penghitung yang diam.