ホバーエフェクトで背景画像が切り替わるエフェクトを作りました。
このエフェクトを、サイト全体の背景に設定すれば、かなりダイナミックなホバーエフェクトになります。
<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の背景色を変えるだけでも、だいぶ印象が変わります。
ぜひ使ってみてください。
