ロールオーバー時に動きを与えるJavaScript
jQuery - BackgroundPosition plugin
今回もまたweb creators 2009年1月号の「Web Design Style-UP Tips」からのテクニックの紹介です。
jQueryの「BackgroundPosition plugin」というプラグインを使うと、メニューボタンにロールオーバーした際にFlashのような滑らかなアニメーションを施してくれます。
ちなみにサンプルは下記のページ。
→jQuery Background Test
仕組みとしては、メニューボタンの下に配置する変化のある背景画像を用意し、その背景画像をJavaScriptで移動させるコトによって、ロールオーバー時にアニメーションさせる…というモノです。
下記のサイトからJavaScriptをダウンロードして読み込ませます。
→Downloading jQuery - jQuery JavaScript Library
→Plugins | jQuery Plugins
とりあえず、サンプルはこちら。
設定は下記のページを参考にすれば、簡単に設置できると思います。
→Using jQuery for Background Image Animations - Snook.ca
| 固定リンク
この記事へのコメントは終了しました。
コメント