ITエンジニア/デザイナ向けにオープンソースを毎日紹介

おお、これは凄いぞ!

今のWebサービスでは何となくJavaScriptを多用してしまう雰囲気があります。ユーザ操作による処理を行うとなるとすぐにJavaScriptに頼ってしまいます。

しかしそれではセキュリティ上などでJavaScriptをオフにしていると動作しないものになってしまいます。そんな簡単に動かなくなるシステムではダメです。ということでスタイルシートを駆使してどこまでできるのかチャレンジしてみるのは決して損にはならないはずです。

今回はCSS3だけでストップウォッチを実装してしまったStopwatch in CSSを紹介します。

計測中、計測中。
計測中、計測中。

数字の下にある開始、一時停止、ストップはちゃんと動作します。なお1秒以下の単位は止めることができないようです。

一時停止中
一時停止中

タネは以下のスタイルシート設定にあるようです。アニメーションのタイミングをずらしつつ、コンテンツも切り替えているのですね。面白い。

#hours:after {
    animation-duration: 216000s;
    -webkit-animation-duration: 216000s;
}

#minutes:after {
    animation-duration: 3600s;
    -webkit-animation-duration: 3600s;
}

#seconds:after {
    animation-duration: 60s;
    -webkit-animation-duration: 60s;
}

#centiseconds:after {
    content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A";
    animation: centiseconds steps(100) infinite;
    -webkit-animation: centiseconds steps(100) infinite;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
}

個人的に知らなかったのが以下の定義。

#start:target .unit:after {
    animation-play-state: running;
    -webkit-animation-play-state: running;
}

アニメーションのステータスをハッシュタグを使って管理しているようです。かなりチャレンジングで面白いソフトウェアです。

スタイルシートでもここまでできるんだ、というソフトウェアはデザイナー、プログラマー双方の目を引きます。安直にJavaScriptへ行く前にちょっとだけスタイルシートで実現する方法はないか考えてみると面白そうですね。

Stopwatch in CSSはCSS3製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Stopwatch in CSS

paullaros/paullaros.github.io

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2