最近、WebページでもJavaScriptを使った美しいエフェクトを見かけることが多くなりました。そういったエフェクトはWeb上で公開されているライブラリを使っていることが多いので、自分もライブラリを使って遊んでみました。

エフェクトが使えるライブラリとして最も有名なのが「prototype.js」で、最近はこのライブラリをベースに拡張したライブラリが多く公開されているようです。今回はそんなライブラリの一つである「moo.fx」を使ってみました。Webサイトにも書かれているように、3kbとファイルが軽いのが特徴みたいです。

moo.fxは、WebサイトからダウンロードしたJavaScriptファイルをHTMLのヘッダ部分に記述すれば使えるようになります。ドキュメントも公開されているので、それほど使うのは難しくはないですね。ただ今回は、ドキュメントが英語なのと、久々にJavaScriptを使ったということもあり、エフェクトを動かすまで小一時間もかかってしまいました。

エフェクトは数種類用意されており、使いたいエフェクトのオブジェクトを生成し、動作用の関数を実行することでエフェクトが実行されます。透明度、横幅、高さの３つの要素でエフェクトをかけられるようですが、横幅と高さのエフェクトを使うと、レイアウトが破綻したり、非表示にはできても表示に戻せなかったりとおかしな状況になるようです。

まだまだ分からない事だらけな状況ですが、JavaScriptも改めて学びつつ、使いこなせるようになるまで勉強しようかなと。