CSSとSVGで作ったアニメーションがスゴイ
CSSとSVGの威力をここまで発揮している作品はなかなかお目にかかれない。その上、可愛いときた。
こういうのを作ってみたいなぁと思うけど、私にその創作性と根性が無いのもよくわかってるんで、とりあえず鑑賞に留めておこう。
早速見てみよう。chromeでしか動かないので注意。
tympanus.net
DIVでパーツを組み立てて、CSSで色や形を指定。
SVGアニメーションでプルプル動かすということらしいが。
詳しい説明はこちら(英語)
tympanus.net
このアニメーションデモ画面を開いたまま
chromeのその他ツール▶デベロッパーツール▶窓が開くのでEscを押す▶
Console窓が開くので左の点々3つをクリック▶Animationを開いてみて欲しい。
Animationが時系列で表示される。
だからなに?と言えばそうなんだけど、これどうやって指定してるんだ?と疑問の嵐。
専門外のことゆえサッパリわからんちん!だけど、面白すぎる。
それにしてもここまで細かく作るのは驚嘆に値する。
SVGアニメーション、ちょっと勉強しようかなぁ~
- 作者: 相澤裕介
- 出版社/メーカー: カットシステム
- 発売日: 2014/07
- メディア: 単行本
- この商品を含むブログを見る
Web制作者のためのIllustrator&ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術 (Web制作者のための教科書シリーズ)
- 作者: あわゆき,窪木博士,三階ラボ(長藤寛和、宮澤聖二),松田直樹
- 出版社/メーカー: インプレス
- 発売日: 2015/05/22
- メディア: Kindle版
- この商品を含むブログ (1件) を見る