スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSスプライトにアニメーションを設定できるSpritemenu

グローバルナビなど、メニューやボタンにちょっとしたアニメーションをつけると印象が変わって効果的。最近はグローバルナビをCSSスプライトで作成することが多いのですが、そんな時に簡単にアニメーションを設定できる「Spritemenu」が便利です。

まず、次のようなメニュー用の画像を用意します。

spritemenu

ここで注意しなければならないことが2点。1つは上が標準状態で下がロールオーバーの状態になるよう並べること。もう1つは各メニューの幅が均等になるように並べること。この2点に注意してメニュー画像を用意します。

Basically make one large image containing all of the buttons needed for your menu, the normal state along the top, the hover state along the bottom. Also they all need to be the same size:

次に、HTMLでjQueryとともに jquery.spritemenu-0.2.js を読み込みます。



あとはリストで横並びにしたメニューに対して、spritemenuを実行するだけ。

$(function() {
	$('#gnavi').spritemenu({
		grid:"spritemenu.jpg",
		buttonwidth: 110,
		buttonheight: 60,
		speed: 300
	});
});

speed でアニメーションの速度を調節したり、animate でアニメーションの種類を設定することもできます。画像さえちゃんと用意しておけば、簡単に設定できるのでいいですね。

JSのダウンロードやデモなどは元サイトよりどうぞ。

DISTINCT Corp » Spritemenu 0.2

関連するエントリー
HTMLをLightboxで表示できるMOOdalBox
カレンダーで日付入力ができるjQuery Date Inputが便利

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。