皆様こんにちは！ロジカルスタジオのフロントエンドエンジニア、T.Kです。
突然ですが、皆様はマウスオーバー画像切替えをどのように実装されていますでしょうか？
私はよく
CSSの擬似クラス:hoverで表示する<img>要素を切り替える
という方法を使います。
以下に実装の例を示します。
パソコンでご覧の方は、以下のcodepen中の弊社マスコットキャラクターロージー
の顔にマウスを載せてみてください
しかし、案件によっては画像が要素のbackground-imageで指定されていて、新しく<img>タグを書けない場合もあったりします。
この場合、
- 変化前の画像を要素の
background-imageに設定 - 変化後の画像を要素の擬似クラス
:hoverのbackground-imageに設定
というふうに設定することになるかと思います。
ただしこの方法だと、初回マウスオーバー時に画像が一瞬ちらつく（変化後の画像が一瞬表示されず白くなる）ことがあります。
以下をご覧ください。画像が切り替わる時に一瞬ちらつきが起こります…
（ちらつきが起こらない場合は低速回線のシミュレートを試してみてください）
これは見た目的にあんまりよろしくないため、なんとかちらつかない方法を考えたいところですが…
う～ん、原因不明やなあ…
どうやって解決しようか…
<img>タグも書かれへんしなあ…
弊社
マスコット
キャラクター
カール
せや、疑似要素使ったらちらつきなくなるんちゃう？
ためしにいっぺんやってみよ！
あ、この要素、::beforeも::afterもすでに設定されとるやんけ…
カール（というか、この問題にぶち当たっていた当時の私）もだいぶ悩んでいます…
当記事では、こういった場合に使える、ちらつきをなくすテクニックを紹介します！
完成形
以下をご覧ください。背景画像がちらつくことなく切り替わります！
原理
そもそも、なぜ<img>タグを使うとちらつかないのか
<img>タグで読み込むよう設定した画像は、ページが読み込まれた時点でほぼ同時に読み込まれます。
（ブラウザの検証ツールのネットワークパネルを参照するとお分かりかと思います）
マウスオーバーする前にすでに画像が読み込まれているため、ちらつくことなくスムーズに変化します。
なぜbackground-imageを使うとちらつくのか
失敗例では、マウスオーバー前には変化前の画像しか読み込まれておらず、
マウスオーバーした時点で初めて変化後の画像が読み込まれます。
そのため、変化後の画像が読み込まれるまでの一瞬、背景画像が無くなり、それがちらつきという形で現れます。
では、解決法は？
マウスオーバー前に変化前・変化後どちらの画像も読み込めば、ちらつく問題を解消できます。
background-imageで２枚の画像を背景画像に設定すれば、マウスオーバー前に２枚とも画像を読み込むことができます！
#wrap-success{
background-image:url("変化前の画像"),url("変化後の画像");
}
このままだと画像が２枚重なって表示されてしまうので、
マウスオーバー前と後でそれぞれ非表示にしたい画像をbackground-size:0 0で見えなくします。
#wrap-success{
background-image:url("変化前の画像"),url("変化後の画像");
background-size:cover,0 0;
&:hover{
background-size:0 0,cover;
}
}これで背景画像がちらつくことなくスムーズに切り替わりました！やったね！
終わりに
ちらつきの原因は、マウスオーバー前に変化後の画像が読み込まれていなかったことでした。
当記事で紹介した方法はJavaScriptに頼らないため、手軽で便利なのではないでしょうか。
よろしければ、ぜひ参考にしてみてください！
ところで
弊社ロジカルスタジオでは、スキルと働きやすさの同時読み込みが可能です！
働きやすい環境を求めている方！ぜひ採用サイトからご応募ください！
