ブラインド開閉型スライドショーⅡ

 先に投稿した「ブラインド開閉型」では、ブラインド(短冊型矩形)が一方向(左から右)に順次閉じたり開いたりするタイプのものであったが、今回の投稿では、左から右に順次閉じ、次いで、右から左に順次開いていくタイプのものである。このタイプでは、ひとつの animaition を全ての短冊矩形が共有するというわけにはいかず、それぞれが独自の animation を持つことになる。

サンプル

本サンプル表示用HTML

<div id="stage">
	<div id="frame">
      <div id="photo1" class="photo"><img src="wp-images/1.jpg"></div>
      <div id="photo2" class="photo"><img src="wp-images/2.jpg"></div>
      <div id="photo3" class="photo"><img src="wp-images/3.jpg"></div>
      <div id="photo4" class="photo"><img src="wp-images/4.jpg"></div>
      <div id="photo5" class="photo"><img src="wp-images/5.jpg"></div>
    </div>
    <div id="rec1" class="rec"></div>
    <div id="rec2" class="rec"></div>
    <div id="rec3" class="rec"></div>
    <div id="rec4" class="rec"></div>
    <div id="rec5" class="rec"></div>
    <div id="rec6" class="rec"></div>
    <div id="rec7" class="rec"></div>
    <div id="rec8" class="rec"></div>
    <div id="rec9" class="rec"></div>
    <div id="rec10" class="rec"></div>
</div>

HTML概要説明

・HTMLは、前投稿の「ブラインド開閉型」と同じである。

本サンプル表示用CSS

#stage {
	position: relative;
	width: 600px;
	height:338;
	margin: 0 auto;
}
.photo {
	position: absolute;
	width: 600px;
	height: 338px;
}
.photo img {
    visibility:hidden;
	-webkit-animation: imgTrans 30s infinite;
	animation: imgTrans 30s infinite;
}
#photo1 img {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#photo2 img {
	-webkit-animation-delay: 6s;
	animation-delay: 6s;
}
#photo3 img {
	-webkit-animation-delay: 12s;
	animation-delay: 12s;
}
#photo4 img{
	-webkit-animation-delay: 18s;
	animation-delay: 18s;
}
#photo5 img {
	-webkit-animation-delay: 24s;
	animation-delay: 24s;
}
#frame {
	width: 600px;
	height: 338px;
	position: relative;
	overflow: hidden;
}
.rec {
	width:60px;height:338px;
	background:#fff;
	position:absolute;
	top:0;
	opacity:0;
}
#rec1 { left:0;
	-webkit-animation: sliceaction1 6s infinite;
	animation: sliceaction1 6s infinite;
}
#rec2 { left:60px;
	-webkit-animation: sliceaction2 6s infinite;
	animation: sliceaction2 6s infinite;
}
#rec3 { left:120px;
	-webkit-animation: sliceaction3 6s infinite;
	animation: sliceaction3 6s infinite;
}
#rec4 { left:180px;
	-webkit-animation: sliceaction4 6s infinite;
	animation: sliceaction4 6s infinite;}
#rec5 { left:240px;
	-webkit-animation: sliceaction5 6s infinite;
	animation: sliceaction5 6s infinite;}
#rec6 { left:300px;
	-webkit-animation: sliceaction6 6s infinite;
	animation: sliceaction6 6s infinite;}
#rec7 { left:360px;
	-webkit-animation: sliceaction7 6s infinite;
	animation: sliceaction7 6s infinite;}
#rec8 { left:420px;
	-webkit-animation: sliceaction8 6s infinite;
	animation: sliceaction8 6s infinite;}
#rec9 { left:480px;
	-webkit-animation: sliceaction9 6s infinite;
	animation: sliceaction9 6s infinite;}
#rec10 { left:540px;
	-webkit-animation: sliceaction10 6s infinite;
	animation: sliceaction10 6s infinite;}
@-webkit-keyframes imgTrans {
 0% { visibility:visible;}
 20% { visibility:hidden;} 
 100% { visibility:hidden;}
}
@-webkit-keyframes sliceaction1 {
	0% { opacity:1;}
	15% { opacity:1;}
	20% { opacity:0;}
	80% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@-webkit-keyframes sliceaction2 {
	0% { opacity:1;}
	13.33% { opacity:1;}
	20% { opacity:0;}
	81.67% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@-webkit-keyframes sliceaction3 {
	0% { opacity:1;}
	11.67% { opacity:1;}
	20% { opacity:0;}
	83.33% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@-webkit-keyframes sliceaction4 {
	0% { opacity:1;}
	10% { opacity:1;}
	20% { opacity:0;}
	85% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@-webkit-keyframes sliceaction5 {
	0% { opacity:1;}
	8.33% { opacity:1;}
	20% { opacity:0;}
	86.67% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@-webkit-keyframes sliceaction6 {
	0% { opacity:1;}
	6.67% { opacity:1;}
	20% { opacity:0;}
	88.33% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@-webkit-keyframes sliceaction7 {
	0% { opacity:1;}
	5% { opacity:1;}
	20% { opacity:0;}
	90% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@-webkit-keyframes sliceaction8 {
	0% { opacity:1;}
	3.33% { opacity:1;}
	20% { opacity:0;}
	91.67% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@-webkit-keyframes sliceaction9 {
	0% { opacity:1;}
	1.67% { opacity:1;}
	20% { opacity:0;}
	93.33% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@-webkit-keyframes sliceaction10 {
	0% { opacity:1;}
	20% { opacity:0;}
	95% { opacity:0;}
	97% { opacity:1;}
	100% { opacity:1;}
}
@keyframes imgTrans {
 0% { visibility:visible;}
 20% { visibility:hidden;} 
 100% { visibility:hidden;}
}
@keyframes sliceaction1 {
	0% { opacity:1;}
	15% { opacity:1;}
	20% { opacity:0;}
	80% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@keyframes sliceaction2 {
	0% { opacity:1;}
	13.33% { opacity:1;}
	20% { opacity:0;}
	81.67% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@keyframes sliceaction3 {
	0% { opacity:1;}
	11.67% { opacity:1;}
	20% { opacity:0;}
	83.33% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@keyframes sliceaction4 {
	0% { opacity:1;}
	10% { opacity:1;}
	20% { opacity:0;}
	85% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@keyframes sliceaction5 {
	0% { opacity:1;}
	8.33% { opacity:1;}
	20% { opacity:0;}
	86.67% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@keyframes sliceaction6 {
	0% { opacity:1;}
	6.67% { opacity:1;}
	20% { opacity:0;}
	88.33% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@keyframes sliceaction7 {
	0% { opacity:1;}
	5% { opacity:1;}
	20% { opacity:0;}
	90% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@keyframes sliceaction8 {
	0% { opacity:1;}
	3.33% { opacity:1;}
	20% { opacity:0;}
	91.67% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@keyframes sliceaction9 {
	0% { opacity:1;}
	1.67% { opacity:1;}
	20% { opacity:0;}
	93.33% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@keyframes sliceaction10 {
	0% { opacity:1;}
	20% { opacity:0;}
	95% { opacity:0;}
	97% { opacity:1;}
	100% { opacity:1;}
}

CSSのポイント説明

・見た目は非常に長いものになっているが、コピペで記述すればそれほどの手間ではなく、PCに負担をかけるほどの負荷にはならないと思う。
・一番目の矩形が最初に閉じて(非透明になり)最後に透明になるような設定になるので、各矩形(#rec1,#rec2,,,)それぞれに animation の記述が必要になる。
・スライドの切替が6秒毎で、これが矩形のanimation単位時間(100%)となっており、開・閉それぞれに1秒ずつかけている。したがって、各矩形のanimationの時間差が0.1秒(1.67%)となるように設定している。


コメントを残す

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