先に投稿した「ブラインド開閉型」では、ブラインド（短冊型矩形）が一方向（左から右）に順次閉じたり開いたりするタイプのものであったが、今回の投稿では、左から右に順次閉じ、次いで、右から左に順次開いていくタイプのものである。このタイプでは、ひとつの 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%）となるように設定している。
