1
/
5

Sign up for free

This page is intended for users in Japan(English). Go to the page for users in United States.

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

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

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

私はよく

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

という方法を使います。

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

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

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

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

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

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

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

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


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

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

完成形

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


原理

そもそも、なぜ<img>タグを使うとちらつかないのか

<img>タグで読み込むよう設定した画像は、ページが読み込まれた時点でほぼ同時に読み込まれます。
ブラウザの検証ツールのネットワークパネルを参照するとお分かりかと思います)

マウスオーバーする前にすでに画像が読み込まれているため、ちらつくことなくスムーズに変化します。

なぜbackground-imageを使うとちらつくのか

失敗例では、マウスオーバー前には変化前の画像しか読み込まれておらず、
マウスオーバーした時点で初めて変化後の画像が読み込まれます。

そのため、変化後の画像が読み込まれるまでの一瞬、背景画像が無くなり、それがちらつきという形で現れます。

では、解決法は?

マウスオーバー前に変化前・変化後どちらの画像も読み込めば、ちらつく問題を解消できます。

background-imageで2枚の画像を背景画像に設定すれば、マウスオーバー前に2枚とも画像を読み込むことができます!

#wrap-success{
background-image:url("変化前の画像"),url("変化後の画像");
}

このままだと画像が2枚重なって表示されてしまうので、

マウスオーバー前と後でそれぞれ非表示にしたい画像をbackground-size:0 0で見えなくします

#wrap-success{
background-image:url("変化前の画像"),url("変化後の画像");
background-size:cover,0 0;
&:hover{
background-size:0 0,cover;
}
}

これで背景画像がちらつくことなくスムーズに切り替わりました!やったね!😊

終わりに

ちらつきの原因は、マウスオーバー前に変化後の画像が読み込まれていなかったことでした。

当記事で紹介した方法はJavaScriptに頼らないため、手軽で便利なのではないでしょうか。

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

ところで

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

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


フロントエンドエンジニア
即戦力募集!最新技術を追い求めるフロントエンドエンジニアをWanted!
ロジカルスタジオは、テクノロジーとデザインの視点からクライアントの課題解決をめざす、大阪のクリエイティブプロダクションです。 クライアントの期待を超えて「もっと良くなる、を見つける」のが私たちのスタイル。企画・提案からデザイン制作・システム構築、運用、改善提案をワンストップで行えるのが一番の強みです。近年ではその実績と品質が評価され、案件も急増しています。 代表の古川が掲げる企業理念は「絆を大切に、周りの人を豊かにし、社会に貢献する」。 私たちはこのミッションを推進するため、「新しい技術へのチャレンジ精神」を軸に、「切磋琢磨する仲間」と「働きやすい職場環境」を整え、「成長と可能性を大切にする風土」を育ててきました。 2019年9月に増床し、外部向けのセミナーにも活用できるカンファレンスルームを拡充。スタッフによる公式ブログや、マスコットキャラクター「ロージー&カール」によるTwitterなど、情報発信も強化しています。 可能性の芽をすくい上げられるこの場所を、より大きくしていきたい。 私たちと一緒に、このビジョンを実現しませんか。
株式会社ロジカルスタジオ
株式会社ロジカルスタジオ's job postings
16 Likes
16 Likes

Weekly ranking

Show other rankings