読者です 読者をやめる 読者になる 読者になる

メモを揉め

お勉強の覚書。

時計と世界各地のライブカメラの映像を組み合わせた何か

GWはこれを作ってました。

時計と世界各地のライブカメラの映像を組み合わせたものです。

YouTubeのiframe APIを使用しているので、モバイル環境だと自動再生が効かず映像が再生されません。

以下の操作が行えます。

  • 時刻を表す文字のシルエットをShift+Kで太くShift+Jで細くする
  • Shift+Cで周囲の色、Shift+Lで時刻の文字色を変更する

操作するには、一度この時計をクリックしたりしてフォーカスしてあげてください。

仕組み

Liveカメラの映像を一番下に置き、その上に重ねた<div></div>要素をCSSでアニメーションさせて、数字のシルエットを作っています。

以前、オリンピックのエンブレムを動かした時のコードを流用して、少しづついじっていたものがベースになっています。
オリンピックのエンブレムに特化していたコードを、もう少し汎用的に使えるようにして、3x3のパターン化された図形を扱いやすくするok-blocksというライブラリにしました。

memowomome.hatenablog.com

www.npmjs.com

ok-blocksのデモページ

今回はこのok-blocksを使用して、前々から作ってみたいと思っていたアイデアを試してみたものです。
倍率によっては<div></div>要素同士の隙間が線になってしまうことがあるのが残念ですが、概ねイメージどおり形にできたので良かったです。

時刻のフォーマットには前から気になっていたMoment.jsを使用してみました。

Moment.js

あと、数字の大きさがフィボナッチ数列になっています。