JavaScript なしで動くカウンター

ここにあるカウンターデザインのうち、かなりの数が動きます。数字が自らカウントアップしたり、パネルが描かれるように現れたり、何かが所定の位置に落ち着いたりします。

そのいずれもJavaScriptを1行も使っていません。

仕組み

カウンターはSVGであり、SVGは自身のスタイルシートを内包できます。動きは画像自体の中に書かれたCSSキーフレームによるもので、そのため全体が1つのファイル、1回のリクエストとして届き、自動的に動き出します。ブラウザはこれを、ほかのCSSアニメーションと同じように——スクリプトを起動することなく、コンポジター上で——処理します。

実際上の帰結として、動きのあるカウンターも静止したカウンターも、コストは変わりません。サイズはおおよそ1.8KBから3.2KBの範囲に収まります。ライブラリもなければ2回目のリクエストもなく、読み込み中にページの残りの部分をブロックすることもありません。

動きの種類

これらは見た目ではなく、どのように動くかによってグループ分けされています。実際に選ぶ際の決め手になるのは、見た目よりもそちらだと分かったからです。

• 構築型——カウンターが、線を1本ずつ描くようにして姿を現します。
• 重みのある動き——何かが落ちてきて、跳ね、そして落ち着きます。慣性を伴う動きです。
• 近未来的で動きのあるもの——発光、走査線、漂う霧。3種類の中で最も派手です。

動きを伴わずにその雰囲気だけを求める場合のために、落ち着いた近未来系のファミリーも用意されています。この記事の執筆時点で、用意されているデザインのうち58点がアニメーションするようになっており、これは当初誰かが作ろうとしていた数をはるかに上回っています。

訪問者が動きを減らすよう設定していた場合

オペレーティングシステムには、アニメーションを減らす設定があります。人々がこれを有効にするのは、動きに対する敏感さのため、前庭障害のため、片頭痛のため、そして時には単に、ページ上で物が動くことに疲れるためです。ブラウザはこの設定を、すべてのページに伝えます。

これらのカウンターはこの設定を尊重します。訪問者が自分のシステムに動きを減らすよう設定している場合、アニメーションは実行されず、同じ数字が表示された静止カウンターになります。これは想定ではなく、この記事の執筆にあたってデザインごとに確認済みです。

これを尊重するのに必要なのは、スタイルシートのたった1行です。そしてそれが、装飾になるか、迷惑になるかの分かれ目です。

使わないほうがよい場合について一言

動きは目を引きます。それこそが動きの存在意義そのものであり、同時に、抑制すべき理由でもあります。

カウンターがそのページの主眼でないなら——たいていのページではそうです——隅で動くものは、訪問者から得たかったはずのものを、本来のコンテンツと奪い合うことになります。静止したカウンターであれば、何も求めることなく同じ数字を伝えられます。

カウンターがページの個性の一部になっている場合——個人サイトや、プロジェクトページ、多少の演出があってもよいもの——には、アニメーション付きのものが向いています。誰かが文章を読もうとしているページでは、静止するものが向いています。