CSSとHTML Canvasで作るモーショングラフィック - ICS MEDIA

ICS MEDIAのトップページに掲載しているモーショングラフィック。これはCSSとHTML Canvas要素を使って作成したものです。時間経過とともに波の形状と色彩が変化し、多彩な表現を楽しめるようになっています。 本記事ではCSSとHTML Canvasの理解につながることを目標に、このモーショングラフィックの作成方法をステップ形式で解説します。サンプルのソースコードはすべてGitHubにて公開していますので、あわせて参照ください。 ▲ 完成版サンプル ステップ1. CSSでグラデーション背景の作成 サンプルを別ウインドウで開く ソースコードを確認する はじめに、時間経過で色彩が変化するグラフィックを作成しましょう。CSSで縦に長いグラデーションの背景を用意し、CSSアニメーションを使って縦方向に移動させることでグラデーションが変化する表現ができます（ステップ1のソースコード)。 #b

[bujyutukaname]

すごい!

[yoshizan]

いろいろ参考になります。

[actywave]

きれいやねｗ

[digitalglm]

CSS3とHTML5 Canvasで作るモーショングラフィック - ICS MEDIA: ICS MEDIAリニューアル後の トップページ…

[edo_m18]

相変わらず分かりやすい記事。多少JS使っているとは言え、CSSでここまでできるようになったんだなぁ。

[masapon49]

きれいφ(. .)メモメモ

[kojiro-s]

かっこいい

[wcp0725]

美しい表現だなー