このページの本文へ

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

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

文●古籏一浩、ASCII.jp

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

最後の仕上げ、スクリプトの組み込み

 最後に、スクリプトを組み込みましょう。LavaLampライブラリは先に説明したjQueryに加えて、緩急のある動きを付けるライブラリ「Easing」を使用しています。すべてのライブラリファイルを正しい順番で読み込まないとエラーになり、まったく動作しません。必ず、(1)jQuery、(2)Easing、(3)LavaLamp、(4)オリジナルスクリプト「booklist.js」――の順で読み込ませます。

■HTMLのヘッダー部分に追記する(※読み込み順に注意)


<script type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/booklist.js"></script>

 これで完成です。完成したサイトは以下に公開していますので、動作を確認してください。


完成した作例。マウスの動きに合わせて、ナビゲーションポインタがやや遅れて追随。項目の幅に合わせてポインタの幅も変わります


 LavaLampライブラリは、使い方が非常に簡単な分、いろいろと手を入れてみる楽しみがあります。ナビゲーションポインタの画像を変更したり、動きを変更してみるだけでも面白いでしょう。

 今回はここまでです。次回は、「東京ブックマニア」のページをさらにダイナミックに改良しますので、お楽しみに。


(作例デザイン:wataru)

■もっと勉強したい人のためのオススメBOOK(Amazon.co.jp)

この連載の記事

一覧へ

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

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