ITエンジニア/デザイナ向けにオープンソースを毎日紹介

The Good Manはスーパーマンを題材にしたCSS3アニメーションです。

2013年、スーパーマンの新作であるマン・オブ・スティールが公開されます。スーパーマン誕生を描いた本作を表現しているかのようなCSS3アニメーションとしてThe Good Manを紹介します。


トップページです。


字幕付きです。


滑らかなアニメーションです。


結構長いです。

The Good ManはCSS3アニメーションによる実験的位置づけのプロジェクトです。画像は使っておらず、全てテキストとCSS、そしてWeb Fontで表現されています。音声や字幕付きなど面白い試みが随所に行われています。

The Good ManはCSS3/JavaScript製、Creative Commonsのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

CSS3によるアニメーションはまだまだ実験的試みが多く、実用レベルにはなっていません。しかしHTML5が普及するのに合わせて、徐々に利用は拡大されていくでしょう。画像での表現とはまた異なる面白い効果が望めるでしょう。

特にJavaScriptと組み合わせることで形状を滑らかに変化させたり、色を変えることもできます。ユーザアクションと連動したアニメーションも作れるでしょう。作品の作り手としても、フレームワークの開発者としても面白そうなテーマです。

The Good Man

podrivo/thegoodman · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2