JavaScript olmadan animasyonlu sayaçlar

Buradaki sayaç tasarımlarının azımsanmayacak bir kısmı hareket eder. Sayı kendi kendine artarak yükselir, panel kendini çizerek belirir ya da bir şey düşüp yerine oturur.

Hiçbiri tek satır JavaScript kullanmaz.

Nasıl işliyor

Sayaçlar SVG biçimindedir ve SVG kendi stil sayfasını taşıyabilir. Hareket, görselin kendi içine yazılmış CSS keyframes animasyonlarından oluşur; böylece her şey tek dosya olarak, tek istekte gelir ve kendiliğinden hareket etmeye başlar. Tarayıcı bunu diğer tüm CSS animasyonları gibi işler: birleştirme katmanında, hiçbir betiği uyandırmadan.

Pratikteki sonucu şu: animasyonlu bir sayaç, durağan bir sayaçla aynı maliyettedir. Boyutları kabaca 1,8 ile 3,2 KB arasındadır. Kütüphane yok, ikinci istek yok ve yüklenirken sayfanın geri kalanını engelleyen hiçbir şey yok.

Hareket türleri

Tasarımlar neye benzediklerine göre değil, nasıl hareket ettiklerine göre gruplanmıştır, çünkü seçimi asıl belirleyen şeyin bu olduğu ortaya çıkıyor:

• Adım adım kurulan – sayaç, çizgi çizgi kendini çizerek ortaya çıkar.
• Ağırlık hissiyle – bir şey düşer, zıplar ve yerine oturur. Ardında eylemsizlik olan bir hareket.
• Fütüristik, hareketli – parıltı, tarama çizgileri, süzülen sis. Üçü arasında en gösterişlisi.

O görünümü hareket olmadan isteyenler için sakin bir fütüristik aile de var. Bu yazı yazılırken sunulan tasarımların elli sekizi hareketli; bu, başta kimsenin yapmayı planladığından epey fazla.

Ziyaretçi daha az hareket istediğinde

İşletim sistemlerinde animasyonu azaltmaya yarayan bir ayar bulunur. İnsanlar bunu harekete duyarlılık, vestibüler bozukluklar ya da migren nedeniyle, bazen de sayfada hareket eden şeyler yorucu olduğu için açar. Tarayıcı bu tercihi her sayfaya iletir.

Bu sayaçlar bu tercihe uyar. Bir ziyaretçi sisteminden hareketi azaltmasını istemişse animasyon çalışmaz ve üzerinde aynı sayı bulunan durağan bir sayaç görür. Bu, varsayılmadı; bu yazı yazılırken tasarım tasarım kontrol edildi.

Buna saygı göstermek bir stil sayfasında tek satıra mal olur ve süs ile baş belası arasındaki fark tam da budur.

Kullanmamaktan yana bir söz

Hareket gözü çeker. Bütün amacı budur ve aynı zamanda ölçülü olmanın gerekçesidir.

Sayfanın konusu sayaç değilse – ki çoğu sayfada değildir – köşede hareket eden bir şey, ziyaretçinin dikkati için asıl içerikle yarışır; oysa sayfanın var olma nedeni o içeriktir. Durağan bir sayaç aynı sayıyı hiçbir şey talep etmeden söyler.

Animasyonlu olanları, sayacın sayfanın karakterine ait olduğu yerlerde kullanın: kişisel bir site, bir proje sayfası, biraz gösteriş barındıran bir yer. Birinin okumaya çalıştığı bir sayfada yerinde duran bir tasarım seçin.