emileはCSS/JavaScript製のオープンソース・ソフトウェア。Webブラウザ上でアニメーションを行う際、まず思いつくのはFlashを使った手法だろう。だがそこまで複雑なアニメーションでもなく、そもそもFlashを扱うのが苦手な場合はどうしたら良いだろう。そこで使えそうなのがJavaScriptだ。

動作サンプル

 

最近のJavaScriptは表現力が高く、簡単なアニメーションくらいなら十分に実現できるようになっている。さらにCSSを使うことで位置の設定も容易に、色の変更もできるようになる。それを使って作られているのがemileだ。

emileはPrototype.jsやjQueryといった有名なライブラリを使わずに作られている。アニメーションを使いたいとなった途端に重たいフレームワークを導入というのでは萎えてしまう。わずか50行程度でアニメーションを実現しているのだから面白い。

ピクチャ 156.png

動作後

** **

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