ブラインド効果CSS
スライドショー要素ではあるが、ブラインド効果を与えたスタイルで、コンテンツが
連動するフォトなど連鎖するなら面白く使えるでしょう...と思います?
作動は、軽量のCSSですので、個別に画像だけを入れ替えて異なる表示で
スタイルシートに記載すればシリウスサイトのどのページでも反映可能...です..
作動確認
![](../img/s324030b.jpg)
![](../img/bshcbdbcdcbdbu.jpg)
![](../img/ac4.jpg)
![](../img/beisittku.jpg)
![](../img/1444251161903.gif)
面倒そうな形状ですが、コピペでやればすぐに実写完了します...
横サイズは、600にしていますが、変更する際はCSS指定も合わせてください
画像コードだけを置き換えてくださいね...
<div id="bord">
<div id="frame">
<div id="photo1" class="photo"><img src="<% pageDepth %>img/s324030b.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>
CSS追記
左から右へ開くバージョン
#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;}
}
逆効果
右から左への逆効果は、HTMLは同じでCSSのみ以下に書き換えてください
#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;}
}
長々と大変ですがここで終了...です..
ここは、エントリーページでスタイルの割り込みからDEMOを表示させましたが
左右ともの逆効果を二つ作動される際は、ID classを個別に書き換えねばならない...
が、理由で一つの表示としています...
ソース CSSともID classを書き換えれば複数掲載も可能...
良い効果であることを願います。
スポンサーリンク
- 回転登場スライド効果、そして退場型
- 背景奥から全面に回転しながら登場するスライド画像...そしてお役目終了で奥に引き込まれる...詳細はサイトで....
- 速攻でデフォルトタイプスライド効果を発生させる
- シリウスに限らずですが、簡単に動くスライドをCSS形成ですぐに作ることができます....でも、名の通り基本みたいなデフォルト作動ですよ...