メモを揉め

お勉強の覚書。

アニメーション

ライブカメラと時計のやつをElectronアプリにした

前の投稿で作ったデモをElectronで包んでアプリにしてみた。 memowomome.hatenablog.com Circle CIとGithub Releasesを連携させて、releaseブランチをプッシュするとリリースされるようになっている。 (超優秀な同僚が組んだ物を流用している) アカベコマ…

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

GWはこれを作ってました。 時計と世界各地のライブカメラの映像を組み合わせたものです。 YouTubeのiframe APIを使用しているので、モバイル環境だと自動再生が効かず映像が再生されません。 以下の操作が行えます。 時刻を表す文字のシルエットをShift+Kで…

話題の五輪エンブレムをCSSで動かしてみた

今日もよく燃えてますね。 しかしそういった話は一切合切横に置かせてもらいまして、私はCSSで動かしたくなったので動かしてみることにします。 単純な図形とルール このエンブレムは非常に単純な図形とルールで出来ています。 大抵のタイポグラフィは一貫す…

setTimeoutの挙動について

JavaScriptによるアニメーションの制御について調べていたところ、本筋から離れてしまいそうだったのでここに。 ここまでの流れをおおまかに書くと、 JavaScriptにはタスクのキューがあり、頭から順に登録されたタスクが処理される。 ここで言うタスクとはほ…

CSSスプライトによるアニメーションでプログレスバーを作ってみた

オライリーの書籍「javascriptグラフィックス」第2章「DHTML」より、CSSスプライトというテクニックを学んだ。 ダイナミックHTML - Wikipedia javascriptグラフィックス - デモページ HTML5Canvas、Adobe Flashを使わないので互換性が高いのもさることながら…