このページの本文へ

英国の映像作家も使うJS製LavaLampメニュー (2/5)

2009年05月18日 11時00分更新

文●古籏一浩、ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

MooTools発祥の「LavaLamp」をjQueryで使う

 架空の書評サイト「東京ブックマニア」にはグローバルナビゲーションがありませんでした。そこでヘッダー部分に、ラバランプ型メニューを追加します。

作例

作例はおなじみ「東京ブックマニア」。ヘッダー部分にグローバルナビゲーションとしてラバランプ型メニューを追加します


 お手本サイトで使われているのは、その名も「LavaLamp」というJavaScriptライブラリです。LavaLampはもともと、Ajax/JavaScriptライブラリである「MooTools」上で動作するライブラリでしたが、現在ではjQueryライブラリにも移植されています。ちなみに、このような面白い動きをするライブラリはMooToolsには数多くあるので、興味のある方はMooToolsの公式サイトを覗いてみてください。

 本連載ではこれまでjQueryを使用していますので、今回はjQuery版のLavaLampライブラリを使うことにしましょう。

LavaLampライブラリのページ

LavaLampライブラリのページ

 はじめに、以下のURLからLavaLampライブラリをダウンロードします。

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

 ページの下の方にある「Update」から、「Download the zip file」のリンクをクリックするとZIPファイルのダウンロードが始まります。

「Download the zip file」のリンク文字をクリックしてダウンロード

「Download the zip file」のリンク文字をクリックしてダウンロード

 ダウンロードが終わったらZIPファイルを展開します。このうち、動作に必要なファイルは以下のとおりです。.jsファイルはjsフォルダに、それ以外はすべてcssフォルダに入れてください。

  • bg.gif
  • lava.gif
  • lavalamp_test.css
  • jquery.lavalamp.js
  • jquery.easing.min.js

 最終的に以下の画面のような構成になっていれば、ライブラリの設置準備は完了です。

LavaLampのファイル構成

LavaLampのファイル構成


この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く