CSSとJavaScriptを組み合わせたアニメーションライブラリ「emile」
emileはCSS/JavaScript製のオープンソース・ソフトウェア。Webブラウザ上でアニメーションを行う際、まず思いつくのはFlashを使った手法だろう。だがそこまで複雑なアニメーションでもなく、そもそもFlashを扱うのが苦手な場合はどうしたら良いだろう。そこで使えそうなのがJavaScriptだ。
動作サンプル
最近のJavaScriptは表現力が高く、簡単なアニメーションくらいなら十分に実現できるようになっている。さらにCSSを使うことで位置の設定も容易に、色の変更もできるようになる。それを使って作られているのがemileだ。
emileはPrototype.jsやjQueryといった有名なライブラリを使わずに作られている。アニメーションを使いたいとなった途端に重たいフレームワークを導入というのでは萎えてしまう。わずか50行程度でアニメーションを実現しているのだから面白い。
動作後
CSSの設定値をJavaScriptから変更することでダイナミックなアニメーションを実現している。対応ブラウザはIE6、Firefox 1.5、Safari 2.0.4、Opera 9.25、Google Chrome 1.0以上となっている。相当幅広く対応ができるようだ。
シンプルなだけに複雑な操作は難しいかも知れない。だがぴたりと当てはまる場面があれば、emileは相当力強い味方になるはずだ。
madrobby’s emile at master - GitHub
http://github.com/madrobby/emile
