インタラクティブなフォトギャラリー：css Tips12
前回は、CSSだけで実装する横並びのプルダウンメニューにつきまして、サンプルソースコードを交え記載いたしました。
PCではおなじみのグローバルナビゲーション、CSSだけで作成できますと他のパーツ（画像など）を準備する必要がなく、とても効率的に作成できることと思います。
今回はtransformを用いて、サムネイル画像を効果的に見せるフォトギャラリーを作成してみたいと思います。また、transformとtransitionの組み合わせにより、CSSのみでサムネイルがマウスに反応する効果を作成してみます。
という事で、それでは今回はッ、
・写真が散らばっているような効果
・マウスに反応する効果の作成
・アニメーション効果の設定
上記について記載していこうと思います…。
まずは、サンプルDemoページ
フォトギャラリー基本レイアウト
それではサムネイルを作成します。今回のサンプルではサムネイルに触れていないときは横160×縦120px、拡大時には横320×縦240pxとなるように設定します。拡大後に画像を綺麗に見せるため、サムネイル画像は拡大後のサイズとして書き出しておきます。
HTMLは、ulを使ってコーディングし、各サムネイルは後ほど個別に効果を設定するので、idを記載しておきます。
<li id=”photo1″><a href=”#”><img src=”images/photo1″ alt=””></a></li>
<li id=”photo2″><a href=”#”><img src=”images/photo2″ alt=””></a></li>
<li id=”photo3″><a href=”#”><img src=”images/photo3″ alt=””></a></li>
<li id=”photo4″><a href=”#”><img src=”images/photo4″ alt=””></a></li>
</ul>
CSSのコーディングをしていきます。ますは、サムネイルがグリッド状に並んでいるレイアウトになるようにコーディングしていきます。
今回のレイアウトではあえてCSS3の機能などは使わずに、floatを用いてコーディングを行います。liとimgのサイズは、初めに記載したとおり横160×縦120pxに固定しておきます。
| #Gallery li { |
| float: left; |
| width: 160px; |
| height: 120px; |
| margin: 0 20px 20px 0; |
| border: 5px solid #fff; |
| } |
| /* 画像 */ |
| #Gallery li a img { |
| width: 160px; |
| height: 120px; |
| } |
また、サムネイルの装飾も行ってみます。box-shadowで影の設定も追記します。
| /* #Gallery liにz-indexの初期値を追加 */ |
| #Gallery li { |
| position: relative; |
| z-index: 10; |
| box-shadow: 2px 3px 3px #000; |
| } |
写真が散らばっているような効果
次にtransformを用いて、写真が散らばっているような効果を作成します。今回のサンプルでは散らばっているような効果、およびマウスがふれた際の拡大効果のため、transformのscale（拡大）、rotate（回転）、translate（移動）を用います。
scaleには拡大率、rotateには角度、translateには横→縦の順で移動する距離を指定します。
詳しくは、以前記載したtransformの記事リンクを下記に記載しておきます。
| /* 個別の効果 */ |
| #photo1 { |
| transform: scale(1.0) rotate(-10deg) translate(-5px,-3px); |
| } |
| /* 以下#photo2から4も個別に指定 */ |
マウスに反応する効果の作成
liのhover疑似クラスにrotateとtranslateを0に戻し、scaleを2.0に設定するようなtransformを設定します。
| /* 回転を0、拡大を2倍 */ |
| #Gallery li:hover { |
| transform: scale(2.0) rotate(0deg) translate(0,0); |
| } |
※transformを利用する際の回転や拡大の中心は、無指定の場合、対象ブロックの横50%、縦50%の位置になります。中心点を変更したい場合はtransform-originで、transform-origin：0 100%；のように指定します。
これで触れた時の効果は出来ましたが、このままでは、拡大されたサムネイルが他のサムネイルの下に隠れてしまい部分が出てきてしまいます。
そこで、hoverのスタイルにz-indexを設定します。ここに設定するz-indexは、上記で指定したz-indexよりも大きな値にします。
| #Gallery li:hover { |
| transform: scale(2.0) rotate(0deg) translate(0,0); |
| z-index: 100; |
| } |
アニメーション効果の設定
最後に、transitionでアニメーション効果を設定します。transitionは、通常の状態からhover状態など、状態間のスタイルの違いをアニメーションさせるためのスタイルです。サムネイルの各状態に設定されたtransformスタイルの違いをtransitionによってアニメーションさせます。
transitionの基本的な記述は、アニメーションさせたいプロパティ名、秒数、イージングを順に指定します。
transitionの3つ目のオプションであるイージングでは、アニメーションの変化速度を指定します。今回のサンプルで指定しているease-outは、アニメーションが終るに近づくにつれてゆっくりになる効果です。
イージングの値として、あらかじめ動きが決められているキーワードには、以下のようなものがあります。
| キーワード | 効果 |
|---|---|
| liner | 一定速度 |
| ease | なめらかな変化 |
| ease-in | ゆっくり開始、素早く終了 |
| ease-out | 素早く開始、ゆっくり終了 |
| ease-in-out | ゆっくり開始、素早く変化、ゆっくり終了 |
サムネイルのアニメーションは、transformをターゲットとして0.2秒でイージングにease-outを指定します。コードはサンプルCSSのようになります。以上で完成となります。
サンプルCSS
| #Gallery li { |
| float: left; |
| width: 160px; |
| height: 120px; |
| margin: 0 20px 20px 0; |
| border: 5px solid #fff; |
| position: relative; |
| z-index: 10; |
| box-shadow: 2px 3px 3px #000; |
| transition: transform 0.2s ease-out; |
| } |
それでは前回同様、最後にソースコードをコピーして使えるようにまとめて記載してみます。
フォトギャラリー：サンプルHTMLとCSS
<body> <h1 style="color:#fff; text-align:center;margin-bottom:80px;font-size:3em;">チャリで温泉～！Photo Gallery</h1> <ul style="text-align:center;" id="Gallery"> <li id="photo1"><a href="#"><img src="image/photo1.jpg" alt=""></a></li> <li id="photo2"><a href="#"><img src="image/photo2.jpg" alt=""></a></li> <li id="photo3"><a href="#"><img src="image/photo3.jpg" alt=""></a></li> <li id="photo4"><a href="#"><img src="image/photo4.jpg" alt=""></a></li> </ul> </body>
background:#4c5482;
margin: 0;
padding: 0;
font-size: 12px;
line-height: 1.4;
}
ul, li, dl, dt, dd {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#Gallery {width:800px;margin: 0 auto;}
#Gallery li {
float: left;
width: 160px;
height: 120px;
margin: 0 20px 20px 0;
border: 5px solid #fff;
position: relative;
z-index: 10;
box-shadow: 2px 3px 3px #000;
transition: transform 0.2s ease-out;
}
#Gallery li a img {
width: 160px;
height: 120px;
}
#photo1 {
transform: scale(1.0) rotate(-10deg) translate(-5px,-3px);
}
#photo2 {
transform: scale(1.0) rotate(5deg) translate(3px,2px);
}
#photo3 {
transform: scale(1.0) rotate(-3deg) translate(-1px,-2px);
}
#photo4 {
transform: scale(1.0) rotate(6deg) translate(-2px,-3px);
}
#Gallery li:hover {
transform: scale(2.0) rotate(0deg) translate(0,0);
z-index: 100;
}
という事で今回は、CSSだけで実装するインタラクティブなフォトギャラリーをサンプルコードを交え記載してみました。
ロールオーバーとロールアウトなど、状態の変化に関するアニメーションは、上記で記載いたしましたとおり、スタイルシートだけでも実装することができます。サムネイルの数が増減しても、アニメーションを設定し直す必要がないことがメリットといえることと思います。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
- 投稿タグ
- CSS3, transform, transition, フォトギャラリー
