« プルダウンメニューに動きを与えるJavaScript | トップページ | PCサイトをケータイで見る裏技 »

2008.12.19

ロールオーバー時に動きを与える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

|

« プルダウンメニューに動きを与えるJavaScript | トップページ | PCサイトをケータイで見る裏技 »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/43376558

この記事へのトラックバック一覧です: ロールオーバー時に動きを与えるJavaScript:

« プルダウンメニューに動きを与えるJavaScript | トップページ | PCサイトをケータイで見る裏技 »