もうちらつきなんて怖くない！マウスオーバーでbackground-imageを切り替える方法

皆様こんにちは！ロジカルスタジオのフロントエンドエンジニア、T.Kです。

突然ですが、皆様はマウスオーバー画像切替えをどのように実装されていますでしょうか？

私はよく

CSSの擬似クラス:hoverで表示する<img>要素を切り替える

という方法を使います。

以下に実装の例を示します。
パソコンでご覧の方は、以下のcodepen中の弊社マスコットキャラクター「ロージー」の顔にマウスを載せてみてください🥰

しかし、案件によっては画像が要素のbackground-imageで指定されていて、新しく<img>タグを書けない場合もあったりします。
この場合、

• 変化前の画像を要素のbackground-imageに設定
• 変化後の画像を要素の擬似クラス:hoverのbackground-imageに設定

というふうに設定することになるかと思います。

ただしこの方法だと、初回マウスオーバー時に画像が一瞬ちらつく（変化後の画像が一瞬表示されず白くなる）ことがあります。

以下をご覧ください。画像が切り替わる時に一瞬ちらつきが起こります…😢

（ちらつきが起こらない場合は低速回線のシミュレートを試してみてください）

これは見た目的にあんまりよろしくないため、なんとかちらつかない方法を考えたいところですが…

カール（というか、この問題にぶち当たっていた当時の私）もだいぶ悩んでいます…

当記事では、こういった場合に使える、ちらつきをなくすテクニックを紹介します！

完成形

以下をご覧ください。背景画像がちらつくことなく切り替わります！

原理

そもそも、なぜ<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に頼らないため、手軽で便利なのではないでしょうか。

よろしければ、ぜひ参考にしてみてください！

ところで

弊社ロジカルスタジオでは、スキルと働きやすさの同時読み込みが可能です！

働きやすい環境を求めている方！ぜひ採用サイトからご応募ください！