全てのサムネイルを、同時にサイズを大きくしながら順次手前に移動させ、ステージを循環させる。
サムネイルのマウスオーバーでやや拡大、マウスクリックで拡大写真をステージいっぱいにフェイド・インさせるタイプの、フォトギャラリーである。マウスクリックを感知するトリガーとしては、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）を参照するので、初期状態に戻る。
