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

のんびり猫プログラマの日常

プログラムのことを書くかもしれない?

 

CSSとSVGで作ったアニメーションがスゴイ

f:id:catprogram:20160331104555p:plain

CSSSVGの威力をここまで発揮している作品はなかなかお目にかかれない。その上、可愛いときた。
こういうのを作ってみたいなぁと思うけど、私にその創作性と根性が無いのもよくわかってるんで、とりあえず鑑賞に留めておこう。


早速見てみよう。chromeでしか動かないので注意。
tympanus.net


DIVでパーツを組み立てて、CSSで色や形を指定。
SVGアニメーションでプルプル動かすということらしいが。

詳しい説明はこちら(英語)
tympanus.net


このアニメーションデモ画面を開いたまま
chromeのその他ツールデベロッパツール▶窓が開くのでEscを押す▶
Console窓が開くので左の点々3つをクリック▶Animationを開いてみて欲しい。
Animationが時系列で表示される。

f:id:catprogram:20160331140258g:plain

だからなに?と言えばそうなんだけど、これどうやって指定してるんだ?と疑問の嵐。
専門外のことゆえサッパリわからんちん!だけど、面白すぎる。

それにしてもここまで細かく作るのは驚嘆に値する。
SVGアニメーション、ちょっと勉強しようかなぁ~



Webで使える!SVGファーストガイド

Webで使える!SVGファーストガイド