UNORTHODOX WORKBOOK

BLOG TOP › Web Design › 全画面の背景画像をCSSのマウスホバーで切り替える(画像のプレロードあり)

全画面の背景画像をCSSのマウスホバーで切り替える(画像のプレロードあり)

Date 2015.06.05 Fri Category Web Design Tags CSS, HTML, ホバーエフェクト

プレロードなしの場合

HTML hover1 hover2 hover3 CSS /* ボタンのスタイル */ .bg-change < position: absolute; top: 0; bottom: 0; width: 200px; height: 50px; line-height: 50px; margin: auto; text-align: center; color: #fff; background: rgba(0,0,0,.4); cursor: pointer; >.bg-change.no1 < right: 66%; >.bg-change.no2 < left: 0; right: 0; >.bg-change.no3 < left: 66%; >/* コンテンツのスタイル */ .wrapper < width: 100%; height: 100%; >.contents < height: 100vh; background-image: url(/* 背景画像のURL */); background-position: center; background-repeat: no-repeat; background-size: cover; > /* ボタンホバー時のスタイル */ .bg-change.no1:hover ~ .wrapper .contents < background-image: url(/* ホバー背景画像１のURL */); > .bg-change.no2:hover ~ .wrapper .contents < background-image: url(/* ホバー背景画像２のURL */); > .bg-change.no3:hover ~ .wrapper .contents < background-image: url(/* ホバー背景画像３のURL */); >

背景画像は .contents に指定していますが、 .wrapper に指定でもいいと思います。全画面は height:100vh と background-size:cover で簡単にやってしまっています。ボタンの位置とかは適当です。

背景画像の切替えは、間接セレクタを使って、各ボタンをホバーした際の background-image のURLをそれぞれ用意しておくことで行っています。

プレロードありの場合

CSS /* ボタンのスタイル */ /* プレロードなしの場合のものと同じなので省略 */ /* コンテンツのスタイル */ .wrapper < width: 100%; height: 100%; >.contents < height: 100vh; background-image: url(/* 背景画像のURL */), url(/* ホバー背景画像１のURL */), url(/* ホバー背景画像２のURL */), url(/* ホバー背景画像３のURL */); background-position: center; background-repeat: no-repeat; background-size: cover, 0 0, 0 0, 0 0; > /* ボタンホバー時のスタイル */ .bg-change.no1:hover ~ .wrapper .contents < background-image: url(/* ホバー背景画像１のURL */); background-size: cover; > .bg-change.no2:hover ~ .wrapper .contents < background-image: url(/* ホバー背景画像２のURL */); background-size: cover; > .bg-change.no3:hover ~ .wrapper .contents < background-image: url(/* ホバー背景画像３のURL */); background-size: cover; >

プレロードは、 .contents の background-image に背景画像URLを複数指定することで行っています。この場合、画像の読み込みは、ページが開かれたと同時に行われるので、プレロードとしてちゃんと機能するようになります。

また、表示させたい背景画像以外は非表示にしないといけないので、複数URL指定の際の最初に設定した背景画像が最前面に表示される性質を利用し、 background-position を center に統一して、全ての背景画像を同じ位置にし、かつ、念のため、 background-size をゼロにして最前面の画像以外は表示させないようにしています。

ちょっと分かりづらいかもしれませんが、一応これで、プレロードを伴ったマウスホバーでの背景画像の切り替えをCSSだけで行うことができました。

まとめ

応用として、 .contents に transition を指定すれば、アニメーションが効いて、よりスムーズな背景画像の切り替えが行えるようになります。

ただ、ブラウザによって少々問題があったため、今回はアニメーションを指定しませんでした。具体的に言うと、Chromeでは、 transition を指定すると初回のオンマウス時のみ(画像を読み込む時のような遅延とは別の)遅延が発生し、Firefoxではそもそも background を transition でアニメーションをさせることができませんでした。唯一、Safari(Mac)での表示が一番自然でした。

CSSアニメーション(transition)で起こるバブリングの原因と対策外部SVGファイルを非同期で読み込み、インラインのSVGスプライトとして利用する CSSだけで一覧ページのレイアウトを切り替える

COMMENTS

NEW POSTS

文字を書き順通りに徐々にアニメーションさせて描画する「ハンドライティングアニメーション」をSVGで実装する方法。以前に AfterEffects で同じようなことをやっていて、それのSVGバージョン。AfterEffe…

WordBench 長野 vol.7 で Webデザイナーが VCCW を使ってみた話をしてきました #wbnagano

2017年3月11日（日）、松本で開催された「WordBench Nagano vol.7」に参加および登壇させていただきました。今さら感は否めませんが、Webデザイナーとして、WordPressの開発環境にVCCWを…

📎📎📎📎📎📎📎📎📎📎