HTMLタグの用意とLavaLampの組み込み
LavaLampを使ったナビゲーションの対象となるのは、ulタグで囲まれたリスト要素です。そこで、まずは以下のようなHTMLを追加します。ulタグには、スタイルシートクラス名 lavaLampWithImage を指定します。
<ul class="lavaLampWithImage">
<li><a href="#">トップ</a></li>
<li><a href="#">ブックレビュー</a></li>
<li><a href="#" class="currentPos">ブックストア</a></li>
<li><a href="#">ブック&シネマ</a></li>
</ul>
次に、マウスの動きに追随するナビゲーションポインタの画像「lava.gif」を用意します。LavaLampを使ったナビゲーションでは、メニュー項目の幅に合わせてナビゲーションポインタの横幅も伸縮するため、以下のような画像を用意します。
lava.gifは、実際のメニュー項目の幅よりも横長(今回は200ピクセル)で作成し、上下にナビゲーションポインタの左端と右端を分割して描いてあります。これをスタイルシートでうまく重ね合わせて、1つの画像に見せている、というわけです。同様にlava.gifを書き換えれば、好みの形のナビゲーションポインタを作成できます。
リストタグと画像が用意できたら、新たに作成した「booklist.js」に、スクリプト部分を記述します。といっても、以下のように lavaLamp()メソッドを呼び出すだけです。
$(function(){
// ナビゲーション
$(".lavaLampWithImage").lavaLamp({
fx: "backout",
speed: 700
});
})
speedプロパティには速度(単位はミリ秒)を、fxプロパティには動きを指定できます。fxプロパティに指定できる動きは以下のとおりです。中には面白い動きをするものもあり、たとえば、bouncein を指定すると、ナビゲーションポイントが左右に小刻みしてから移動します。すべての動きをここで説明するのは難しいので、ぜひ実際に設定して確かめてみてください。
- easein
- easeinout
- easeout
- expoin
- expoout
- expoinout
- bouncein
- bounceout
- bounceinout
- elasin
- elasout
- elasinout
- backin
- backout
- backinout