• MENU●●●●
  • 速攻でデフォルトタイプスライド効果を発生させる


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

    関連記事


     スポンサーリンク

    簡単に作れるスライドショー手順

    シリウスでは、いくつもの種類でスライド効果は発生させることができますが、
    特殊なスタイルはいらない...普通のものでよいとも理解する方はおられます。

     

    ま、それが一番自然体だからなのでしょうか?

     

    というわけで、ほとんどただのスライド効果をCSS形成ですぐに作っちゃいましょう
    ...というわけなんですね

     

    作動をご覧ください

     

    画像リンクは入れられますが、マウスオーバーもなし、ストップも戻りもございません

     

    あくまで、デフォルト...これでよい方は以下へ進みましょう

     


     

    HTML

     

    <div id="boerd">
    <div id="photo1" class="pic"><img src="<% pageDepth %>img/画像1.jpg"style="height:338px;width:600px;" alt="" /></div>
    <div id="photo2" class="pic"><img src="<% pageDepth %>img/画像2.jpg"style="height:338px;width:600px;" alt="" /></div>
    <div id="photo3" class="pic"><img src="<% pageDepth %>img/画像3.jpg"style="height:338px;width:600px;" alt="" /></div>
    <div id="photo4" class="pic"><img src="<% pageDepth %>img/画像4.jpg"style="height:338px;width:600px;" alt="" /></div>
    <div id="photo5" class="pic"><img src="<% pageDepth %>img/画像5.jpg"style="height:338px;width:600px;" alt="" /></div>
    <div style="padding:28%;background:transparent;"></div>
    </div>

     

    画像を5つ用意して、画像コードだけ書き換えてください

     

     

    CSSは以下....スタイルシートへ書き足し

     

    #boerd {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
    }
    .pic img {
    position:absolute;
    width: 100%;
    top:0;
    left:100%;
    -moz-animation: imgTrans 30s infinite;
    -webkit-animation: imgTrans 30s infinite;
    animation: imgTrans 30s infinite;
    }
    #photo1 img {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    }
    #photo2 img {
    -moz-animation-delay: 6s;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    }
    #photo3 img {
    -moz-animation-delay: 12s;
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
    }
    #photo4 img {
    -moz-animation-delay: 18s;
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
    }
    #photo5 img {
    -moz-animation-delay: 24s;
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
    }
    @-webkit-keyframes imgTrans {
    0% { left:100%; }
    5% { left:0%; }
    20% { left:0%; }
    25% { left:-100%; }
    100% { left:-100%; }
    }
    @-moz-keyframes imgTrans {
    0% { left:100%; }
    5% { left:0%; }
    20% { left:0%; }
    25% { left:-100%; }
    100% { left:-100%; }
    }

     

    @keyframes imgTrans {
    0% { left:100%; }
    5% { left:0%; }
    20% { left:0%; }
    25% { left:-100%; }
    100% { left:-100%; }
    }

     

    ここまで....で、終わり

     

     

    ご注意

     

    横サイズを600にしていますね
    もし、記事カラムが600以下の場合は、一週目はさほどずれは見られませんが、
    2週目からずれます

     

    ですので、600以上の記事カラムで使用

     

    もしくは、横サイズをHTML及びCSSで書き換えてください

     


     

    スポンサーリンク

     

     

    速攻でデフォルトタイプスライド効果を発生させる
    CSS形成でスライドオン...作り方、幾つか..まとめ
    トップページ

    速攻でデフォルトタイプスライド効果を発生させる関連解説
    回転登場スライド効果、そして退場型
    背景奥から全面に回転しながら登場するスライド画像...そしてお役目終了で奥に引き込まれる...詳細はサイトで....
    横ブラインド形状スライド効果
    シリウスに取り付け可能な横ブラインド形状のスライドショー効果を発生させる...ソース、CSSを追加しておりますので作動をご覧ください