背景画像を切り替えるhoverエフェクトの作り方【JavaScript】

ホバーエフェクトで背景画像が切り替わるエフェクトを作りました。
このエフェクトを、サイト全体の背景に設定すれば、かなりダイナミックなホバーエフェクトになります。

<a>タグhoverで親領域(もしくはサイト全体)のbackground-imageを切り替える。
さらに、切り替え時にフェードエフェクトを付けて、なおかつ<a>タグを増やしてもCSSを追記しなくても大丈夫なようにJavaScriptを書きました。

HTMLとCSSとJavaScriptに分けて解説をします。

解説のため、エフェクト領域はサイト全体ではなく、一部領域にします。

背景切り替えの実際のイメージ

まずは実際の完成イメージです。こちらのように、各リンクにホバーすると、ホバーしている間だけ個別の画像が背景として現れます。
背景画像の現れるときと消えるときは、フェードで緩やかに変化するようにしています。
スマホではhover(マウスオン)の概念がないので、これはPCのみのエフェクトになります。

ソースコード

ソースコードはこちらになります。
考え方としては、ボタン領域となるリスト内に設置したimgタグから、画像のurlを取得し、それをホバーする度に指定の領域の背景画像に設置するだけです。
フェードエフェクトは、positionで固定した白い領域を、animateメソッドで出したり消したりしているだけです。

HTML

今回はulでリストにしていますが、hover部分をどんな要素にしても大丈夫です。

<!-- HTML -->
<div class="main_visual_area">
<ul class="link_list">
<li class="list_item">
<img src="/wp-content/uploads/2019/01/tokyo02-1024x683.jpg">
<a href="#">LINK1</a>
</li>

<li class="list_item">
<img src="/wp-content/uploads/2019/01/tokyo03-1024x683.jpg">
<a href="#">LINK2</a>
</li>
</ul>
</div>

CSS

CSSの注意点は、背景領域のbackground設定と、フェード用の領域設定、あとはJSでsrc属性を抜き取るためのimg要素をdisplay:none;にしておくことです。

/*CSS*/
div.main_visual_area{
padding:200px 0;
position:relative;
border:solid 2px #f3f4fa;
background-repeat:no-repeat;
background-position:center center;
background-size: cover;
z-index:1;
}
div.mainvisual_blur{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
background-color:#FFF;
z-index:-1;
opacity:0;
}
ul.link_list{
list-style:none;
text-align:center;
padding:0; 
}
ul.link_list li{
display:inline-block;
margin:0 20px;
}
ul.link_list li a{
background-color:#fff;
padding:3px 5px;
text-decoration:none;
}
ul.link_list li img{
display:none;
}

JavaScript

//JavaScript//
var list = $(".list_item"),
backGroundArea = $('div.main_visual_area');

//フェード用の白領域を追加
backGroundArea.prepend('<div class="mainvisual_blur"></div>');
var Blur = $('.mainvisual_blur');
		
list.each(function(){
	var imgUrl = $(this).find('img').attr('src');
　　　　//hoverすると背景画像設置→白領域を透過
	$(this).hover(function(){
	backGroundArea.css("backgroundImage" , "url(" + imgUrl + ")");
	Blur.stop().animate({opacity:"0"},1000);
	})
　　　　//hoverが外れると白領域が非透明になり、背景画像削除
	$(this).mouseleave(function(){
        　Blur.stop().animate({opacity:"1"},500,function(){
	　backGroundArea.css("backgroundImage" , "none"); 
	　});
	})
});

応用のしかた

背景画像の領域と、背景切り替え時のエフェクトを調整すれば、いろいろな表現ができます。

背景領域をサイト全体の背景にすれば、とてもダイナミックなhoverエフェクトになります。
画像切り替えの際にanimateメソッドなどで、もっといろいろな動きを付ければ、面白いエフェクトが作れます。

上記のソースをコピーしてanimateメソッドの時間を変えたり、cssでdiv.mainvisual_blurの背景色を変えるだけでも、だいぶ印象が変わります。

ぜひ使ってみてください。