【高度なアニメーション】ホバーで画像を切り替える
ホバーで画像の切り替え
以下の動画のような演出を作ります。
ホバーした要素ごとに、背景に表示される画像の内容を切り替えるというものです。
実際のコード
<section class="l-section p-oc">
<ul class="p-oc__list">
<li class="p-oc__item" name="ultra">
<div class="p-oc__meta">
STUDIO NNC<br>
Animation Test<br>
2020.07.02
</div>
<h2 class="p-oc__title">ultra</h2>
</li>
<li class="p-oc__item" name="straydog">
<div class="p-oc__meta">
STUDIO NNC<br>
Animation Test<br>
2020.03.20
</div>
<h2 class="p-oc__title">straydog</h2>
</li>
<li class="p-oc__item" name="spirits">
<div class="p-oc__meta">
STUDIO NNC<br>
Animation Test<br>
2020.01.14
</div>
<h2 class="p-oc__title">spirits</h2>
</li>
</ul>
<div class="p-oc__bg"></div>
</section>.p-oc__item {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
margin-bottom: 60px;
}
.p-oc__meta {
width: 180px;
font-size: 14px;
line-height: 1.6;
color: #4c4c4c;
}
.p-oc__title {
font-size: 54px;
letter-spacing: 5px;
line-height: 1;
text-transform: uppercase;
}
.p-oc__bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
background-size: auto 70%;
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}
.p-oc__bg.is-active {
opacity: 0.7;
}$('.p-oc__item').hover(
function(){
var work = $(this).attr('name');
$('.p-oc__bg').css('background-image','url(img/' + work + '.jpg)')
$('.p-oc__bg').addClass('is-active');
},
function(){
$('.p-oc__bg').removeClass('is-active');
}
)解説
大まかな流れは以下の通りです。
1.要素（.p-oc__item）にホバーしたタイミングで、そのname属性を取得・変数に格納
2.取得したname属性と同じ名前の背景画像を設定
3.クラスの付与によってフェードインさせる
まずはHTMLから。それぞれの要素（.p-oc__item）にname属性を付与しておきましょう。その際、name属性の名前は表示したい画像の名前と一致させておきましょう（.p-oc__titleの内容とも一致させておきます。）
次に、Javascriptの内容です。前回の記事同様、hover()でマウスを重ねた時 / 外した時 の2パターンの処理を書いておきます。
ホバーした際には、まずattrメソッドでホバーした要素のname属性を取得し変数（$work）に格納します。次に、CSSメソッドを用いて、画像を表示させるための要素である「div.p-oc__bg（通常時はopacity: 0で見えなくしています）」に背景画像を設定します。文字連結を用いることで、画像の名前に該当する箇所に変数workを代入しています。これにより、ホバーした要素ごとに表示する画像の内容を切り替えることが可能となるのです。
最後にaddClassメソッドで「is-active」というクラスを付与しましょう。CSS上では、すでに「.p-oc__bg」に対して背景画像の表示設定を済ませており、また「.p-oc__bg.is-active」というセレクタに対して「opacity: 0.7」という記述を書いています。これによって、ホバーと同時に画像がフェードインするように見えます。
以上で完成です！
