スライドショー要素ではあるが、ブラインド効果を与えたスタイルで、コンテンツが
連動するフォトなど連鎖するなら面白く使えるでしょう...と思います？

作動は、軽量のＣＳＳですので、個別に画像だけを入れ替えて異なる表示で
スタイルシートに記載すればシリウスサイトのどのページでも反映可能...です..

作動確認

面倒そうな形状ですが、コピペでやればすぐに実写完了します...

横サイズは、600にしていますが、変更する際はＣＳＳ指定も合わせてください
画像コードだけを置き換えてくださいね...

<div id="bord">
<div id="frame">
<div id="photo1" class="photo"><img src="<% pageDepth %>img/ｓ324030b.jpg"style="height:338px;width:600px;" alt="" /></div>
<div id="photo2" class="photo"><img src="<% pageDepth %>img/bshcbdbcdcbdbu.jpg"style="height:338px;width:600px;" alt="" /></div>
<div id="photo3" class="photo"><img src="<% pageDepth %>img/ac4.jpg"style="height:338px;width:600px;" alt="" /></div>
<div id="photo4" class="photo"><img src="<% pageDepth %>img/beisittku.jpg"style="height:338px;width:600px;" alt="" /></div>
<div id="photo5" class="photo"><img src="<% pageDepth %>img/1444251161903.gif"style="height:338px;width:600px;" alt="" /></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>

ＣＳＳ追記
左から右へ開くバージョン

#bord {
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;
-webkit-animation: sliceaction 6s infinite;
animation: sliceaction 6s infinite;
}
#rec1 { left:0;
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;}
#rec2 { left:60px;
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;}
#rec3 { left:120px;
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;}
#rec4 { left:180px;
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;}
#rec5 { left:240px;
-webkit-animation-delay: 0s;
animation-delay: 0s;}
#rec6 { left:300px;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;}
#rec7 { left:360px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;}
#rec8 { left:420px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;}
#rec9 { left:480px;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;}
#rec10 { left:540px;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;}
@-webkit-keyframes imgTrans {
0% { visibility:visible;}
20% { visibility:hidden;}
100% { visibility:hidden;}
}
@-webkit-keyframes sliceaction {
0% { opacity:1;}
5% { opacity:1;}
20% { opacity:0;}
80% { opacity:0;}
95% { opacity:1;}
100% { opacity:1;}
}
@keyframes imgTrans {
0% { visibility:visible;}
20% { visibility:hidden;}
100% { visibility:hidden;}
}
@keyframes sliceaction {
0% { opacity:1;}
5% { opacity:1;}
20% { opacity:0;}
80% { opacity:0;}
95% { opacity:1;}
100% { opacity:1;}
}

逆効果

右から左への逆効果は、ＨＴＭＬは同じでＣＳＳのみ以下に書き換えてください

#bord {
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;}
}

長々と大変ですがここで終了...です..

ここは、エントリーページでスタイルの割り込みからＤＥＭＯを表示させましたが
左右ともの逆効果を二つ作動される際は、ＩＤ classを個別に書き換えねばならない...

が、理由で一つの表示としています...

ソース　ＣＳＳともＩＤ classを書き換えれば複数掲載も可能...

良い効果であることを願います。

スポンサーリンク

横ブラインド形状スライド効果
ＣＳＳ形成でスライドオン...作り方、幾つか..まとめ
トップページ