WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

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

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でロールオーバー時の背景画像切り替えいろいろ

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です