webの素材と技術でGIFアニメを作ってみる

最近GIFアニメを作ってみたいと思っていて、けど僕はAFとかで素敵な映像は作れないので、普段からなじみのある素材(web)と技術(HTML&Javascript)で作ってみる事にした。

なんか派手なのを作りたい!

とりあえずこいつをベースにする。なんかウネウネさせてみる。
重いけど気にしない。

GIFアニメテスト1

素材はON/OFFのデザインがあるチェックボックスとラヂオボンを採用。
ベースアニメーションで使ってる素材をチェックボックス、ラヂオボタンに変更(ベースではbackgroundColor:#000, opacity:0~1とかやってる)。
こいつを動画キャプチャする

GIFアニメテスト3

f:id:ikeryou:20160901234947g:plain

f:id:ikeryou:20160901234951g:plain

そしてこれをめいっぱい敷き詰めてみたのがコチラ

GIFアニメテスト6

ちょっとたのしい