MooTools発祥の「LavaLamp」をjQueryで使う
架空の書評サイト「東京ブックマニア」にはグローバルナビゲーションがありませんでした。そこでヘッダー部分に、ラバランプ型メニューを追加します。
お手本サイトで使われているのは、その名も「LavaLamp」というJavaScriptライブラリです。LavaLampはもともと、Ajax/JavaScriptライブラリである「MooTools」上で動作するライブラリでしたが、現在ではjQueryライブラリにも移植されています。ちなみに、このような面白い動きをするライブラリはMooToolsには数多くあるので、興味のある方はMooToolsの公式サイトを覗いてみてください。
本連載ではこれまでjQueryを使用していますので、今回はjQuery版のLavaLampライブラリを使うことにしましょう。
はじめに、以下のURLからLavaLampライブラリをダウンロードします。
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
ページの下の方にある「Update」から、「Download the zip file」のリンクをクリックするとZIPファイルのダウンロードが始まります。
ダウンロードが終わったらZIPファイルを展開します。このうち、動作に必要なファイルは以下のとおりです。.jsファイルはjsフォルダに、それ以外はすべてcssフォルダに入れてください。
- bg.gif
- lava.gif
- lavalamp_test.css
- jquery.lavalamp.js
- jquery.easing.min.js
最終的に以下の画面のような構成になっていれば、ライブラリの設置準備は完了です。