jQueryでボタンなどに対してのロールオーバーエフェクトをつけるプラグインは多々ありますが、
プラグインのような大きなものでを使用するのではなく、もっと簡単・シンプルな方法で
ロールオーバーエフェクトをつけることが出来ないか実験してみました。

サンプルはテキストリンクボタンに背景画像を敷いて、
ロールオーバー時にアニメーションをつけるパターン。

まず、HTMLソースは以下のように<a>タグのみを並べます。

<a href="#">BUTTON A</a>
<a href="#">BUTTON B</a>
<a href="#">BUTTON C</a>

ボタンを整形するCSSは以下のようにしておきます。

a {
	width: 130px;
	height: 50px;
	line-height: 50px;
	font-size: 15px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	position: relative;
	overflow: hidden;
	display: block;
}

そして、このHTMLとCSSに対してjQueryで背景画像アニメーションの
エフェクトをつけると以下のようなSCRIPTになります。(もちろんjQueryファイルは別途必要)

<script type="text/javascript">
$(function(){
	$("a").each(function(){
		var txt = $(this).text();
		$(this).append('<span>' + txt + '</span>');
		$('a span').css({
			top:'0',
			left:'0',
			width:'100%',
			height:'100%',
			position:'absolute',
			display:'block',
			cursor:'pointer',
			backgroundImage:'url(img/button.jpg)'
		});
		$('a').css({backgroundImage:'url(img/button_ov.jpg)'});
	});
	$("a").hover(function(){
		$(this).children('span').stop().animate({opacity:'0'},300);
	}, function(){
		$(this).children('span').stop().animate({opacity:'1'},300);
	});
});
</script>

<a>タグの中に<span>タグを生成し、2つを重ね合わせ、
上位置には<span>タグ【背景画像:マウスアウト時】
下位置には<a>タグ【背景画像:マウスオーバー時】
という構成にしています。

そしてマウスオーバーで上位置になっている<span>タグに
アニメーション(ここではフェード)効果をつけます。

これらを実際に動かすと以下のように。

簡単にフェードを掛けるだけで、
単純にパパッと画像が切り替わるロールオーバーと違った印象を与えることができます。

フェード以外でも同じ構成で「.hover」時のアクションを変えるだけで
違った動きを見せることも可能。

マウスオーバーでスライドアウトパターンの場合のSCRIPT。

<script type="text/javascript">
$(function(){
	$("a").each(function(){
		var txt = $(this).text();
		$(this).append('<span>' + txt + '</span>');
		$('a span').css({
			top:'0',
			left:'0',
			width:'100%',
			height:'100%',
			position:'absolute',
			display:'block',
			cursor:'pointer',
			backgroundImage:'url(img/button.jpg)'
		});
		$('a').css({backgroundImage:'url(img/button_ov.jpg)'});
	});
	$("a").hover(function(){
		$(this).children('span').stop().animate({top:'50px',opacity:'0'},200);
	}, function(){
		$(this).children('span').stop().animate({top:'0',opacity:'1'},200);
	});
});
</script>

こっちを実際に動かすと以下のように。

ボタンのデザインにもよりますが、こんな動きもおもしろいかなと。

jQueryでIMGタグで表示している画像(ボタンなど)に対してエフェクトをつけるのは簡単ですが、
背景画像に対してエフェクトを掛ける場合は、意外と面倒な感じが。。。

プラグインを使わずに背景画像のロールオーバーをつける際に是非。。。

【関連記事】
jQueryでロールオーバー時の背景画像切り替えいろいろ

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (4)

  • jQueryでロールオーバー時の背景画像切り替えいろいろ - BlackFlag – Web Development Technical | 2010.10.09 18:13

    [...] [...]

  • E2 DESIGNERS BLOG:HTML,CSS,JavaScript,jQuery,FlashなどWebデザインに関するネタ紹介/株式会社E2 | 2010.10.31 1:39

    jQueryでボタンなどのロールオーバー時、背景画像にエフェクトを掛ける方法

    jQueryでボタンなどに対してのロールオーバーエフェクトをつけるプラグインは多々ありますが、 プラグインのような大きなものでを使用するのではなく、もっと簡単・シンプルな方法で …

  • mkt | 2011.12.25 3:51

    お世話になります。
    背景画像の上にテキストを入れるとマウスオンでテキストが消えてしまいます。
    テキストはそそままで背景だけが変更されるようにはできませんか?

  • BlackFlag | 2011.12.25 23:40

    >mktさん

    コメントありがとうございます。

    ここで紹介しているサンプルは、ボタンの文言はテキストを使ったのものなのですが
    その部分の動作がおかしいということでしょうか。
    (サンプルの動作がおかしいということでしょうか・・・)

    ちょっと現象の詳細が把握できないので
    申し訳ありませんが、起こっている事象の詳細と
    確認いただいている環境を再度教えていただけますでしょうか。

    ご確認、よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでボタンなどのロールオーバー時、背景画像にエフェクトを掛ける方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR