フェイドイン・アウト型スライドショー（テロップ入り）

先に記述したフェイドイン・アウト型スライドショーで、各スライドごとに、流れる説明文（テロップ）を挿入したものである。

サンプル

本サンプル表示用HTML

<div id="stage">
	<div id="frame">
      <div id="photo1" class="pic"><img src="wp-images/1.jpg"><span>朝焼けの針ノ木岳</span></div>
      <div id="photo2" class="pic"><img src="wp-images/2.jpg"><span>針ノ木岳、スバリ岳を背に岩小屋沢岳への登り</span></div>
      <div id="photo3" class="pic"><img src="wp-images/3.jpg"><span>剣岳を真近に望む</span></div>
      <div id="photo4" class="pic"><img src="wp-images/4.jpg"><span>鹿島槍ヶ岳、後立山連峰</span></div>
      <div id="photo5" class="pic"><img src="wp-images/5.jpg"><span>岩小屋沢、鳴沢岳を背に岳爺ヶ岳への登り</span></div>
    </div>
</div>

HTML概要説明

「フェイドイン・アウト型スライドショー」に追加したコードのみについて記述する。
・#photo1,#photo2,,,　の各divの写真に相当する説明文を、div内のspanとしてそれぞれ記述する。

本サンプル表示用CSS

#stage {
	position: relative;
	width: 600px;
	height:338;
	margin: 0 auto;
	background:#ddd;
}
.pic {
	position: absolute;
	width: 600px;
	height: 338px;
}
.pic img {
	opacity:0;
	-moz-animation: imgTrans 40s infinite;
	-webkit-animation: imgTrans 40s ease-in infinite;
	animation: imgTrans 40s infinite;
}
.pic span {
	color:#fffffc;
	position:absolute;
	top:300px;left:650px;
	display:block;
	font-size:22px;
	font-weight:bold;
	width:500px;
	-webkit-animation: telop 40s linear infinite;
	animation: telop 40s linear infinite;
}
#photo1 img, #photo1 span {
	-moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#photo2 img, #photo2 span {
	-moz-animation-delay: 8s;
	-webkit-animation-delay: 8s;
	animation-delay: 8s;
}
#photo3 img, #photo3 span {
	-moz-animation-delay: 16s;
	-webkit-animation-delay: 16s;
	animation-delay: 16s;
}
#photo4 img, #photo4 span{
	-moz-animation-delay: 24s;
	-webkit-animation-delay: 24s;
	animation-delay: 24s;
}
#photo5 img, #photo5 span {
	-moz-animation-delay: 32s;
	-webkit-animation-delay: 32s;
	animation-delay: 32s;
}
#frame {
	width: 600px;
	height: 338px;
	position: relative;
	overflow: hidden;
}
@-webkit-keyframes imgTrans {
 0% { opacity:0; }
 7% { opacity:1; }
 18% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@-moz-keyframes imgTrans {
 0% { opacity:0; }
 7% { opacity:1; }
 18% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}

@keyframes imgTrans {
 0% { opacity:0; }
 7% { opacity:1; }
 18% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@-webkit-keyframes telop {
 0% { left:650px; opacity:1;}
 18% { left: -100px; opacity:1;}
 25% { left: -300px; opacity:0;}
 100% { left: -300px; opacity:0;}
}
@keyframes telop {
 0% { left:650px; opacity:1;}
 18% { left: -100px; opacity:1;}
 25% { left: -300px; opacity:0;}
 100% { left: -300px; opacity:0;}
}

CSSのポイント説明

「フェイドイン・アウト型スライドショー」に追加したコードのみについて記述する。
・span 内文字列のプロパティー設定と、animationの設定。
・animation は、写真のanimation と同期させ、同じ間隔に設定する。イージングは付けず linear に設定した。