このページの本文へ

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

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

文●古籏一浩、ASCII.jp

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

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画像の内容

lava.gif画像の内容

 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

この連載の記事

一覧へ
Web Professionalトップページバナー

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

ASCII.jp会員サービス 週刊Web Professional登録

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