全てのサムネイルを、同時にサイズを大きくしながら順次手前に移動させ、ステージを循環させる。
サムネイルのマウスオーバーでやや拡大、マウスクリックで拡大写真をステージいっぱいにフェイド・インさせるタイプの、フォトギャラリーである。マウスクリックを感知するトリガーとしては、target を使っている。
本サンプル表示用HTML
<div id="stage">
<div id="contnr">
<ul>
<li><a href="#p1"><img src="wp-images/img/s1.jpg"></a></li>
<li><a href="#p2"><img src="wp-images/img/s2.jpg"></a></li>
<li><a href="#p3"><img src="wp-images/img/s3.jpg"></a></li>
<li><a href="#p4"><img src="wp-images/img/s4.jpg"></a></li>
<li><a href="#p5"><img src="wp-images/img/s5.jpg"></a></li>
<li><a href="#p6"><img src="wp-images/img/s6.jpg"></a></li>
<li><a href="#p7"><img src="wp-images/img/s7.jpg"></a></li>
<li><a href="#p8"><img src="wp-images/img/s8.jpg"></a></li>
<li><a href="#p9"><img src="wp-images/img/s9.jpg"></a></li>
<li><a href="#p10"><img src="wp-images/img/s10.jpg"></a></li>
</ul>
</div>
<div id="p1" class="photo"><img src="wp-images/img/1.jpg"><span class="cls"><a href="#p11">☓ 閉じる</a></span></div>
<div id="p2" class="photo"><img src="wp-images/img/2.jpg"><span class="cls"><a href="#p11">☓ 閉じる</a></span></div>
<div id="p3" class="photo"><img src="wp-images/img/3.jpg"><span class="cls"><a href="#p11">☓ 閉じる</a></span></div>
<div id="p4" class="photo"><img src="wp-images/img/4.jpg"><span class="cls"><a href="#p11">☓ 閉じる</a></span></div>
<div id="p5" class="photo"><img src="wp-images/img/5.jpg"><span class="cls"><a href="#p11">☓ 閉じる</a></span></div>
<div id="p6" class="photo"><img src="wp-images/img/6.jpg"><span class="cls"><a href="#p11">☓ 閉じる</a></span></div>
<div id="p7" class="photo"><img src="wp-images/img/7.jpg"><span class="cls"><a href="#p11">☓ 閉じる</a></span></div>
<div id="p8" class="photo"><img src="wp-images/img/8.jpg"><span class="cls"><a href="#p11">☓ 閉じる</a></span></div>
<div id="p9" class="photo"><img src="wp-images/img/9.jpg"><span class="cls"><a href="#p11">☓ 閉じる</a></span></div>
<div id="p10" class="photo"><img src="wp-images/img/10.jpg"><span class="cls"><a href="#p11">☓ 閉じる</a></span></div>
<div id="p11"></div>
</div>
HTMLのポイント説明
・サムネイル写真を10枚表示させ、css animation でステージを移動循環させる。
・拡大写真を10枚ステージ上部に配置し、cssで透明にして見えなくしておく。
・拡大写真を格納する div(.photo) の写真の下部右に「☓ 閉じる」という文字を表示し、何も表示させない#P11にリンク付する。
本サンプル表示用CSS
/* 表示枠 */
#stage {
position:relative;
width:600px;
height:375px;
margin:0 auto;
overflow:hidden;
background:#000;
}
#contnr ul {
list-style:none;
}
/* サムネイルを初期には#stage外に配置しanimationをセットする */
#contnr ul li img {
position:absolute;
top:0px;
left:600px;
border:#F90 solid 2px;
transform-origin:left top;
-webkit-animation:slideTrans 10s linear infinite;
animation:slideTrans 10s linear infinite;
}
/* #contnrのhoverでanimationを止める */
#contnr:hover ul li img {
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
/* サムネイルクリックで拡大 */
#contnr ul li:hover img {
width:200px;
}
/* 各サムネイルを1秒おきにanimateさせる */
#contnr ul li:nth-child(1) img {
-webkit-animation-delay: -7s;
animation-delay: -7s;
}
#contnr ul li:nth-child(2) img {
-webkit-animation-delay: -6s;
animation-delay: -6s;
}
#contnr ul li:nth-child(3) img {
-webkit-animation-delay: -5s;
animation-delay: -5s;
}
#contnr ul li:nth-child(4) img {
-webkit-animation-delay: -4s;
animation-delay: -4s;
}
#contnr ul li:nth-child(5) img {
-webkit-animation-delay: -3s;
animation-delay: -3s;
}
#contnr ul li:nth-child(6) img {
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
#contnr ul li:nth-child(7) img {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
#contnr ul li:nth-child(8) img {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#contnr ul li:nth-child(9) img {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
#contnr ul li:nth-child(10) img {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
/* 拡大写真の配置とtransitionをセット */
.photo {
position:absolute;
top:0;left:0;
opacity:0;
transition: opacity 1s ease;
}
/* クリックされたサムネイルに該当する拡大写真の不透明度を1に */
.photo:target {
z-index:100;
opacity:1;
}
.cls {
position:absolute;
top:350px;
left:500px;
}
.cls a {
text-decoration:none;
color:#fff;
font-weight:bold;
}
@-webkit-keyframes slideTrans {
0% { top:100px;left:500px;z-index:1;-webkit-transform:scale(0.5,0.5);}
10% { top:110px;left:460px;z-index:2;-webkit-transform:scale(0.55,0.55);}
20% { top:120px;left:420px;z-index:3;-webkit-transform:scale(0.6,0.6);}
30% { top:130px;left:380px;z-index:4;-webkit-transform:scale(0.65,0.65);}
40% { top:140px;left:340px;z-index:5;-webkit-transform:scale(0.7,0.7);}
50% { top:150px;left:300px;z-index:6;-webkit-transform:scale(0.75,0.75);}
60% { top:160px;left:260px;z-index:7;-webkit-transform:scale(0.8,0.8);}
70% { top:170px;left:220px;z-index:8;-webkit-transform:scale(0.9,0.9);}
80% { top:180px;left:180px;z-index:9;-webkit-transform:scale(1.0,1.0);}
90% { top:190px;left:120px;z-index:10;-webkit-transform:scale(1.5,1.5);opacity:1;}
100%{ top:250px;left:-140px;z-index:20;-webkit-transform:scale(2,2);opacity:0;}
}
@keyframes slideTrans {
0% { top:80px;left:500px;z-index:1;transform:scale(0.5,0.5);}
10% { top:90px;left:460px;z-index:2;transform:scale(0.55,0.55);}
20% { top:100px;left:420px;z-index:3;transform:scale(0.6,0.6);}
30% { top:110px;left:380px;z-index:4;transform:scale(0.65,0.65);}
40% { top:120px;left:340px;z-index:5;transform:scale(0.7,0.7);}
50% { top:130px;left:300px;z-index:6;transform:scale(0.75,0.75);}
60% { top:140px;left:260px;z-index:7;transform:scale(0.8,0.8);}
70% { top:150px;left:220px;z-index:8;transform:scale(0.9,0.9);}
80% { top:160px;left:180px;z-index:9;transform:scale(1.0,1.0);}
90% { top:170px;left:100px;z-index:10;transform:scale(1.5,1.5);opacity:1;}
100%{ top:230px;left:-180px;z-index:20;transform:scale(2,2);opacity:0;}
}
CSS のポイント説明
・サムネイル（#contnr ul li img）は、初期は#stageの右外に配置しておき、animationをセットする。
・animation（slideTrans）は、右上から順次左下に向かって、サイズアップしながら移動していき、左下#stage外に消えるように設定する。
・サムネイルのhoverでanimationを止める（animation-play-state:paused;）。
・サムネイルのanimationをある程度進んだところから始める（秒数をマイナスにする animation-delay: -7s;）。
・li:nth-child(1) は、liの1番目の項目。
・クリックされたサムネイルのリンク先（.photo:target）の写真をtransitionで、0から1に変化せ、FadeInさせる。
・span 「閉じる」のクリックで、設定のないリンク先（#p11）を参照するので、初期状態に戻る。