サムネイル遠近移動型

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


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です