最後の仕上げ、スクリプトの組み込み
最後に、スクリプトを組み込みましょう。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）
