• MENU●●●●
  • 横ブラインド形状スライド効果


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    関連記事


     スポンサーリンク

    ブラインド効果CSS

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

     

    作動は、軽量のCSSですので、個別に画像だけを入れ替えて異なる表示で
    シリウスのどのページでも反映可能...です

     

    作動確認

     

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

     

    横サイズは、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形成でスライドオン...作り方、幾つか..まとめ
    トップページ

    横ブラインド形状スライド効果関連解説
    回転登場スライド効果、そして退場型
    背景奥から全面に回転しながら登場するスライド画像...そしてお役目終了で奥に引き込まれる...詳細はサイトで....
    速攻でデフォルトタイプスライド効果を発生させる
    シリウスに限らずですが、簡単に動くスライドをCSS形成ですぐに作ることができます....でも、名の通り基本みたいなデフォルト作動ですよ...