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

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;
	float: left;
	width: 600px;
	height: 338px;
	left:600px;
	-moz-animation: imgtrans 30s infinite;
	-webkit-animation: imgtrans 30s infinite;
	animation: imgtrans 30s infinite;
}
#photo1 {
	-moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#photo2 {
	-moz-animation-delay: 6s;
	-webkit-animation-delay: 6s;
	animation-delay: 6s;
}
#photo3 {
	-moz-animation-delay: 12s;
	-webkit-animation-delay: 12s;
	animation-delay: 12s;
}
#photo4 {
	-moz-animation-delay: 18s;
	-webkit-animation-delay: 18s;
	animation-delay: 18s;
}
#photo5 {
	-moz-animation-delay: 24s;
	-webkit-animation-delay: 24s;
	animation-delay: 24s;
}
#frame {
	width: 600px;
	height: 338px;
	position: relative;
	overflow: hidden;
}
@-webkit-keyframes imgtrans {
 0% { left:100%; }
 5% { left:0%; }
 20% { left:0%; }
 25% { left:-100%; }
 100% { left:-100%; }
}
@-moz-keyframes imgtrans {
 0% { left:100%; }
 5% { left:0%; }
 20% { left:0%; }
 25% { left:-100%; }
 100% { left:-100%; }
}
@keyframes imgtrans {
 0% { left:100%; }
 5% { left:0%; }
 20% { left:0%; }
 25% { left:-100%; }
 100% { left:-100%; }
}

CSSのポイント説明

・前稿のフェイドインアウト型と違って、配置、animationの設定を全て、写真（img）を格納するdiv（photo1,,,photo5）に設定している。こうしなければいけないという訳ではなく、どちらでも同じ結果になる。
・animationは、トータル30秒、繰り返しを設定。
・各写真は、animation開始時（0%）では画面の右側に位置していて、1.5秒（5％）かけて画面中央に表示される。そのまま20%まで表示され、次いで1.5秒で画面左に移動する。
（各写真は順次6秒ごとにanimateするので、代わりに、次のスライドが右からスライドインする）