[CSS]シンプルなHTMLで実装できる！パネルの背景画像だけをズームさせるテクニック
Post on:2016年8月17日
sponsors
パネルをホバーすると画像だけがズームするエフェクト、最近のWebサイトでよく見かけますよね。
実装方法はいろいろありますが、JavaScriptを使わず、シンプルなHTMLで実装するCSSのテクニックを紹介します。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
私はクライアントに、下記のサイトで使っているエフェクトを使いたい、と頼まれました。
このエフェクトはパネルをホバーすると、背景画像をズームさせ、クリック・タップすると詳細情報にリンクします。ポートフォリオなどのサイトでよく見かけ、ビジュアル面と情報の詳細を見せる両方で効果的です。
実装には多くの方法があります
このエフェクトを実現するには、多くの異なる方法があります。
一つの選択肢として、jQueryのプラグインを使う方法です。例えば、Magnificent.jsです。しかしこれは私の求めていたエフェクトとは少し異なり、軽量ではありません。
もう一つの選択肢は、img要素をパネルの中に配置し、CSSでそれを操作することです。これにはいくつかの利点があります、使用する画像をパフォーマンスやデバイスに適しているようにsrcsetでソースを設定することができます。
今回の要件ではエフェクトをCSSで完全に管理したいので、この方法を採用しました。
エフェクトの実装
最適なパフォーマンスを達成するために、私は画像の拡大を処理するためにCSSのtransformプロパティを使用することにしました。CSSアニメーションはハードウェアアクセラレーションの恩恵を受け、その結果としてアニメーションの他の方法より滑らかに表示されます。
HTML
使うのはimg要素ではなく、背景画像の役割を果たす親の内側のdiv要素に使用します。HTMLでその構造を見てみましょう。
|
1 2 3 |
<div class="parent"> <div class="child"></div> </div> |
CSS
最初に親要素のサイズを指定し、子要素の幅と高さを100%に指定。同様にエリアをカバーするスケール確保し、背景画像を設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.parent { width: 400px; height: 300px; cursor: pointer; } .child { width: 100%; height: 100%; background-color: black; /* fallback color */ background-image: url("images/city.jpg"); background-position: center; background-size: cover; } |
またdiv要素にホバーエフェクトを与えるので、カーソルがポインタになるように「cursor: pointer;」を親要素に加えます。
そして、子要素に影響を与える親要素にホバーのエフェクトを追加します。
|
1 2 3 4 |
.parent:hover .child, .parent:focus .child { transform: scale(1.2); } |
使用する時は、ブラウザのサポートのためにベンダプレフィックスを加えてください。
エフェクトを終了させるために、子要素の通常の状態にトランジションを追加します。
|
1 |
transition: all .5s; |
カラーのオーバーレイを加える時は、::before疑似要素を使うことで実現できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.child::before { content: ""; display: none; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: rgba(52, 73, 94, 0.75); } .parent:hover .child:before, .parent:focus .child:before { display: block; } |
これで親要素をホバーすると、子要素はカラーのオーバーレイを表示します。
ついでに、オーバーレイの上にテキストを加えてみます。
これはHTMLに、テキストの子要素を加える必要があります。
|
1 2 3 4 5 |
<div class="parent"> <div class="child"> <span>Hello</span> </div> </div> |
span要素にいくつかのスタイルを加えます。
|
1 2 3 4 5 6 |
span { color: white; /* テキストのカラーは読みやすいカラーに */ font-family: sans-serif; padding: 25%; position: absolute; } |
span要素はホバーした時だけ、表示されるようにします。
|
1 2 3 4 |
.parent:hover span, .parent:focus span { display: block; } |
これで完成です。
モバイル対応
もしパネル全体がリンクで、ホバーで重要な情報を表示しないのであれば、このままでよいかもしれません。
しかし、ホバーした時の情報が重要であれば、タッチスクリーンでも動作するように.parent要素にonclickでエフェクトが動作するようにするとよいでしょう。
sponsors
