フェイドイン・アウト型スライドショー

css の animation を使った、フェイドイン、フェイドアウトで写真を切り替えるタイプのスライドショーである。

サンプル

本サンプル表示用HTML

<div id="stage">
　　<div id="frame">
      <div id="photo1"><img src="wp-images/1.jpg"></div>
      <div id="photo2"><img src="wp-images/2.jpg"></div>
      <div id="photo3"><img src="wp-images/3.jpg"></div>
      <div id="photo4"><img src="wp-images/4.jpg"></div>
      <div id="photo5"><img src="wp-images/5.jpg"></div>
    </div>
</div>

HTML概要説明

・表示用写真を#frame内にすべて表示させる。
　（cssで全て画面中央に重ねて表示させ、初期は全て非表示にする）

本サンプル表示用CSS

#stage {
	position: relative;
	width: 600px;
	height:338;
	margin: 0 auto;
}
#photo1,#photo2,#photo3,#photo4,#photo5 {
	position: absolute;
	width: 600px;
	height: 338px;
}
#photo1 img,#photo2 img,#photo3 img,#photo4 img,#photo5 img {
	opacity:0;
	-moz-animation: imgTrans 30s infinite;
	-webkit-animation: imgTrans 30s infinite;
	animation: imgTrans 30s infinite;
}
#photo1 img {
	-moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#photo2 img {
	-moz-animation-delay: 6s;
	-webkit-animation-delay: 6s;
	animation-delay: 6s;
}
#photo3 img {
	-moz-animation-delay: 12s;
	-webkit-animation-delay: 12s;
	animation-delay: 12s;
}
#photo4 img{
	-moz-animation-delay: 18s;
	-webkit-animation-delay: 18s;
	animation-delay: 18s;
}
#photo5 img {
	-moz-animation-delay: 24s;
	-webkit-animation-delay: 24s;
	animation-delay: 24s;
}
#frame {
	width: 600px;
	height: 338px;
	position: relative;
	overflow: hidden;
}
@-webkit-keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@-moz-keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}

CSSのポイント説明

・#stage,#frame,img は全て同じサイズ（写真サイズ）に設定。
・写真（img）の非透明度の初期値を０（非表示）に設定する。
・写真（img）にトータル30秒、繰り返しの animation を設定する。
・animationは、最初の5%(1.5秒)でフェイドイン（opacity0->1）、そのまま20%まで表示し、次の1.5秒でフェイドアウト（opacity1->0）し、そのまま100%まで時間待ちとする。
・各写真（スライド）のanimation間隔を6秒ずつずらして取り、写真が順次表示されるようにする。