For reference when creating a website
MK-BLOG
ホーム > MK-BLOG：ホームページ制作の参考に > Web制作技術（HTML/CSS/JS） > インタラクティブなフォトギャラリー：css Tips12

インタラクティブなフォトギャラリー：css Tips12

インタラクティブなフォトギャラリー

インタラクティブなフォトギャラリー：css Tips12

前回は、CSSだけで実装する横並びのプルダウンメニューにつきまして、サンプルソースコードを交え記載いたしました。

PCではおなじみのグローバルナビゲーション、CSSだけで作成できますと他のパーツ（画像など）を準備する必要がなく、とても効率的に作成できることと思います。

今回はtransformを用いて、サムネイル画像を効果的に見せるフォトギャラリーを作成してみたいと思います。また、transformとtransitionの組み合わせにより、CSSのみでサムネイルがマウスに反応する効果を作成してみます。

という事で、それでは今回はッ、

Menu

上記について記載していこうと思います...。

まずは、サンプルDemoページ

フォトギャラリー基本レイアウト

それではサムネイルを作成します。今回のサンプルではサムネイルに触れていないときは横160×縦120px、拡大時には横320×縦240pxとなるように設定します。拡大後に画像を綺麗に見せるため、サムネイル画像は拡大後のサイズとして書き出しておきます。

HTMLは、ulを使ってコーディングし、各サムネイルは後ほど個別に効果を設定するので、idを記載しておきます。

サンプルHTML<ul id="Gallery">
<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に固定しておきます。

サンプルCSS
#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;
}
インタラクティブなフォトギャラリー1

基本的なレイアウトが出来上がったら、拡大した時の重ねあわせを制御するために、あらかじめ#Gallery liにposition:relative;とz-indexの初期値を設定しておきます。

また、サムネイルの装飾も行ってみます。box-shadowで影の設定も追記します。

サンプルCSS
/* #Gallery liにz-indexの初期値を追加 */
#Gallery li {
position: relative;
z-index: 10;
box-shadow: 2px 3px 3px #000;
}
インタラクティブなフォトギャラリー2

写真が散らばっているような効果

次にtransformを用いて、写真が散らばっているような効果を作成します。今回のサンプルでは散らばっているような効果、およびマウスがふれた際の拡大効果のため、transformのscale（拡大）、rotate（回転）、translate（移動）を用います。

scaleには拡大率、rotateには角度、translateには横→縦の順で移動する距離を指定します。

散らばったような効果を出すため、あらかじめ指定しておいたサムネイルのidに対して、1つずつ別の値を設定していきます。値を設定する際は、拡大効果のために、scale(1.0)も一緒に設定しておきます。

サンプルCSS
/* 個別の効果 */
#photo1 {
transform: scale(1.0) rotate(-10deg) translate(-5px,-3px);
}
/* 以下#photo2から4も個別に指定 */
インタラクティブなフォトギャラリー3

マウスに反応する効果の作成

マウスに反応する効果を作ります。マウスがサムネイルに触れた時に、回転と移動を元に戻し、サムネイルを2倍に拡大するような効果を設定します。 liのhover疑似クラスにrotateとtranslateを0に戻し、scaleを2.0に設定するようなtransformを設定します。

サンプルCSS
/* 回転を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よりも大きな値にします。

サンプルCSS
#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のようになります。以上で完成となります。

■最終的な#Gallery li サンプル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

サンプルHTML<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>
サンプルCSSbody {
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だけで実装するインタラクティブなフォトギャラリーをサンプルコードを交え記載してみました。

ロールオーバーとロールアウトなど、状態の変化に関するアニメーションは、上記で記載いたしましたとおり、スタイルシートだけでも実装することができます。サムネイルの数が増減しても、アニメーションを設定し直す必要がないことがメリットといえることと思います。

とりあえず、今回はここまで...。

お仕事のご依頼は下記より...、それではまた次回...。

ARCHIVES

CATEGORY