transformプロパティとjQueryでアナログ時計を作ってみた【CSS Advent Calendar 2017】4日目
はじめに
この記事は CSS Advent Calendar 2017 4日目の記事です。
Webデザインの参考になるものを探しにギャラリーサイトを見ていたところ、以下のサイトを見つけました。
現在時刻がアナログ時計風に表示されていることにかなり興味を持ちました。 自分でも作れるかも？と思い、CSS と jQuery で作ってみました。
概要
- 時間の針、分の針の div 要素を用意
- JS で現在時刻を取得
- 時間と分の数値から角度を計算し transform 要素の rotate で角度をつける
- 秒針も作ってみた
- スムーズに回転するように transition をつけてみた
この秒針と transition によってかなり厄介なことに……
完成物
Codepen にアップしました。
制作のメモ
transition-timing-function の指定
デフォルト値が ease なため、一定の速度で針が動くよう linear を指定。
after 疑似要素で針を作成
transform: rotate はボックスの中心部分を原点に回るので、全体の半分の長さの after 疑似要素を作りました。
問題発生
59秒から0秒になるタイミングで秒針が逆方向に1周する
transition 要素でアニメーションさせているため、59→0に移るため逆回転してしまいました。
対策
分まで計算にいれて、毎分発生しないようにしました。ただし、計算するまで／毎時にぐるっぐるまわります。
うまくやるなら
原因の transtion の指定を外します。
おわりに
実用的ではない内容ですが、CSS（と JS ）でこういったものも作れる、ということを知っていただければ幸いです。
CSS Advent Calendar 2017
明日は takamasa_ さんです！
