【高度なアニメーション】ホバー時に背景と文字色を変更
ホバーで背景と文字色を変更
以下のような演出を作ります。
テキストにホバーすると、そのタイミングでまず画面全体の背景色と文字の色が変わります。さらに、文字についてはいっぺんに変えるのではなく左側から順番に変わっていくようにします。
実際のコード
<section class="l-section p-jameen">
<ul class="p-jameen__list">
<li class="p-jameen__item">
<div class="p-jameen__itemInner">
<div class="p-jameen__number">01</div>
<h2 class="p-jameen__title">
Test Title:01
</h2>
</div>
</li>
<li class="p-jameen__item">
<div class="p-jameen__itemInner">
<div class="p-jameen__number">02</div>
<h2 class="p-jameen__title">
Test Title:02
</h2>
</div>
</li>
<li class="p-jameen__item">
<div class="p-jameen__itemInner">
<div class="p-jameen__number">03</div>
<h2 class="p-jameen__title">
Test Title:03
</h2>
</div>
</li>
</ul>
</section>.p-jameen__item {
position: relative;
margin-bottom: 70px;
}
.p-jameen__itemInner {
display: inline-block;
}
.p-jameen__number {
font-size: 12px;
}
.p-jameen__title {
position: relative;
font-size: 36px;
font-weight: 900;
-webkit-background-clip: text;
background-clip: text;
background-image: url(../img/orange.svg), url(../img/white.svg);
background-size: 0%, 100%;
background-repeat: no-repeat;
background-position: left center;
transition: background-size 1.6s cubic-bezier(0.87, 0, 0.13, 1) -0.6s;
}
.p-jameen__title:hover {
-webkit-text-fill-color: transparent;
background-size: 100%, 100%;
transition: background-size 1.6s cubic-bezier(0.87, 0, 0.13, 1) -0.6s;
}$('.p-jameen__title').hover(
function(){
$('body').css({
'background-color': '#333',
'color': '#fff'
})
},
function(){
$('body').css({
'background-color': '#fff',
'color': '#333'
})
}
)解説
行う作業については、ざっくりと「背景色の変更」と「文字色の変更」の2つに分けることができます。背景色をイジる方が簡単ですので、まずはそちらから見ていきましょう。
背景色の変更はJavascriptの記述で完結していて、内容もシンプルです。hover()を用いて、マウスを重ねた時 / 外した時の処理をそれぞれ書きます。重ねた時はbodyに対して「background-color: #333」「color: #fff」、外した時（つまり平常時）はbodyに対して「background-color: #fff」「color: #333」という記述を書いておきます。これで、ホバーしたタイミングでの背景色の変更は完了です。
文字色の変更について見ていきましょう。動画では徐々にオレンジ色へと変わっていましたね。こちらですが、「background-clip: text」を用いて、オレンジ色の背景画像を文字で切り抜くような形で実装したいと思います。長いので、各項目ごとに追っていきましょう。
テキストでの切り抜きと背景画像の設定
まずは「background-clip: text」を適用しましょう。「-webkit-」も合わせて記述してください。
次に、切り抜く対象となる背景画像を指定しましょう。この時、二つの画像を用意するのがポイントです。一つはホバーした最初の段階の文字色（white.svg、ここでは白い長方形を用意しました）、もう一つは最終的な文字の色用の画像（orange.svg、ここではオレンジ色の円を用意しました）です。
その他、「size」「repeat」「position」についてそれぞれサンプルのように記述しておきましょう。
ホバー時の処理
最後に、ホバーした時の記述を確認していきます。
まず「-webkit-text-fill-color: transparent;」で文字の色を透明にします。実は「background-clip: text」を書いただけでは切り抜いた画像は見えないままで、文字自体の色を透明にするとそこで初めて背景画像が見えるようになります。
複数のbackground-imageを指定している際、それぞれの画像のサイズを別個で指定することができます。具体的には、「一つ目の値 , 二つ目の値」といったようにカンマを挟む形です。この考え方で「backround-size: 100%, 100%」と書くことで、「orange.svg」のサイズが0%→100%となり、white.svgは最初から100%で変わらず、という風になります。あとはtransitionで滑らかにアニメーションしているように見せればOKです。
背景画像の位置は「left center」、繰り返しの設定は「no-repeat」となっていますので、最終的な動きは以下のように説明できると思います。
【背景画像「orange.svg」が、左端を起点として100%のサイズになる様子をテキストで切り抜いて見せることで、左から順番にテキストの色が変わっているように見える】
以上で完成です！
