先に投稿した「ブラインド開閉型」では、ブラインド（短冊型矩形）が一方向（左から右）に順次閉じたり開いたりするタイプのものであったが、今回の投稿では、左から右に順次閉じ、次いで、右から左に順次開いていくタイプのものである。このタイプでは、ひとつの 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のポイント説明
・見た目は非常に長いものになっているが、コピペで記述すればそれほどの手間ではなく、ＰＣに負担をかけるほどの負荷にはならないと思う。
・一番目の矩形が最初に閉じて（非透明になり）最後に透明になるような設定になるので、各矩形(#rec1,#rec2,,,)それぞれに animation の記述が必要になる。
・スライドの切替が6秒毎で、これが矩形のanimation単位時間（100%）となっており、開・閉それぞれに1秒ずつかけている。したがって、各矩形のanimationの時間差が0.1秒（1.67%）となるように設定している。