• MENU●●●●
  • 回転登場スライド効果、そして退場型


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

    スポンサー広告

    関連記事


    回転スライド効果...その1

    背景奥からフォト画像が、回転しながら縮小・拡大するスタイルのスライド..

     

    お楽しみ効果をサイトで発生させる効果が、得られるかは素材次第..

     

    まずは、作動を確認...

     

     

     

    表示用HTML は、以下コピーして取り付けたいページに張り付け
    次は、5つの画像コードを書き換え ..

     

    注意事
    貼り付けは以下のコード位置で、<li><を右移動しないでください..
    左にスペース開けると...一つ飛ばされての表示となります。

     

    <div id="bord">
    <li><img src="<% pageDepth %>img/sr1.jpg"style="height:300px;width:300px;" alt="" /></li>
    <li><img src="<% pageDepth %>img/sr2.jpg"style="height:300px;width:300px;" alt="" /></li>
    <li><img src="<% pageDepth %>img/sr3.jpg"style="height:300px;width:300px;" alt="" /></li>
    <li><img src="<% pageDepth %>img/sr4.jpg"style="height:300px;width:300px;" alt="" /></li>
    <li><img src="<% pageDepth %>img/sr5.jpg"style="height:300px;width:300px;" alt="" /></li>
    </div>

     

    ここまで ..

     


     

    CSSは以下、スタイルシートに張り付け

     

    サイズ調整は、bordで行ってください..

     

     

    /* 表示枠 bord */
    #bord {
    position:relative;
    width:300px;height:300px;
    background:#000;
    overflow:hidden;
    }
    #bord ul {
    list-style:none;
    }
    /* 表示写真の設定 */
    #bord li img {
    position:absolute;
    top:0px;
    left:0px;
    border-top:5px solid #ddd;
    border-left:5px solid #ddd;
    border-right:5px solid #555;
    border-bottom:5px solid #555;
    opacity:0;
    -webkit-transform-origin:50% 50%;
    transform-origin:50% 50%;
    }
    /* 各スライドのanimation設定(4秒ずつずらしてplay)*/
    #bord li:nth-child(1) img {
    -webkit-animation:selfrot 20s ease 0s infinite;
    animation:selfrot 20s ease 0s infinite;
    }
    #bord li:nth-child(2) img {
    -webkit-animation:selfrot 20s ease 4s infinite;
    animation:selfrot 20s ease 4s infinite;
    }
    #bord li:nth-child(3) img {
    -webkit-animation:selfrot 20s ease 8s infinite;
    animation:selfrot 20s ease 8s infinite;
    }
    #bord li:nth-child(4) img {
    -webkit-animation:selfrot 20s ease 12s infinite;
    animation:selfrot 20s ease 12s infinite;
    }
    #bord li:nth-child(5) img {
    -webkit-animation:selfrot 20s ease 16s infinite;
    animation:selfrot 20s ease 16s infinite;
    }
    @-webkit-keyframes selfrot {
    0% {-webkit-transform:rotate(-180deg) scale(0,0);opacity:1;}
    5% {-webkit-transform:rotate(0deg) scale(1,1);}
    15% {-webkit-transform:rotate(0deg) scale(1,1);}
    20% {-webkit-transform:rotate(180deg) scale(0,0);}
    100%{-webkit-transform:rotate(180deg) scale(0,0);opacity:1;}
    }
    @keyframes selfrot {
    0% {transform:rotate(-180deg) scale(0,0);opacity:1;}
    5% {transform:rotate(0deg) scale(1,1);}
    15% {transform:rotate(0deg) scale(1,1);}
    20% {transform:rotate(180deg) scale(0,0);}
    100%{transform:rotate(180deg) scale(0,0);opacity:1;}
    }

     

    ここまで~


     

    作動はプレビューでご確認いただけます...

     

    その他は、巻末の記事メニューを御覧ください...

     

    スポンサーリンク

     

     

    回転登場スライド効果、そして退場型
    CSS形成でスライドオン...作り方、幾つか..まとめ
    トップページ

    回転登場スライド効果、そして退場型関連解説
    横ブラインド形状スライド効果
    シリウスに取り付け可能な横ブラインド形状のスライドショー効果を発生させる...ソース、CSSを追加しておりますので作動をご覧ください
    速攻でデフォルトタイプスライド効果を発生させる
    シリウスに限らずですが、簡単に動くスライドをCSS形成ですぐに作ることができます....でも、名の通り基本みたいなデフォルト作動ですよ...

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト