• MENU●●●●
  • 横回転型サムネイルギャラりーCSS指定方法


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

    スポンサー広告

    関連記事


    横回転クリスタルスタイルサムネイル取り付けCSS解説

    通常サムネイル画像というと横配置が一般的でしょうか?
    で、お使いの方は置くおられでしょうね...
    でも、時には変わり種のスタイルでもいいんじゃないでしょうか?

     

    高級イメージを表すときとか?

     

    華やかなイメージも...時には良いかな?

     

    画像をクリックしても、次のスタイルへ切り替わるわけではありませんが、
    リンク誘導ならできますね..

     

    横にクリスタルスタイルで回転するサムネイルギャラリー群
    ...作動をご覧ください

     

     

    導入手順

     

    配置したい記事内に配置...6つの画像コードのみ...サイズ指定で書き換えてください

     

    シリウスで取り込む画像コードと改行例
    原本<img src="<% pageDepth %>img/av1.jpg" alt="" />
    改行例<img src="<% pageDepth %>img/av1.jpg"style="height:200px;width:200px;" alt="" />

     

    以下コピー
    <div id="stage">
    <div id="photo1" class="photo"><img src="<% pageDepth %>img/ac1.jpg"style="height:200px;width:200px;" alt="" /></div>
    <div id="photo2" class="photo"><img src="<% pageDepth %>img/ac2.jpg"style="height:200px;width:200px;" alt="" /></div>
    <div id="photo3" class="photo"><img src="<% pageDepth %>img/ac3.jpg"style="height:200px;width:200px;" alt="" /></div>
    <div id="photo4" class="photo"><img src="<% pageDepth %>img/ac4.jpg"style="height:200px;width:200px;" alt="" /></div>
    <div id="photo5" class="photo"><img src="<% pageDepth %>img/ac5.jpg"style="height:200px;width:200px;" alt="" /></div>
    <div id="photo6" class="photo"><img src="<% pageDepth %>img/ac6.jpg"style="height:200px;width:200px;" alt="" /></div>
    </div>

     

     

    画像コードは例記載

     

    シリウス機能で読み込む画像コードに
    <img src="<% pageDepth %>img/1a345.png" alt="" />

     

    縦横ともサイズ指定の記載を書き足す...例
    <img src="<% pageDepth %>img/ac8.jpg"style="height:150px;width:150px;" alt="" /...例

     

    複数のページで画像だけ入れ替えで表示は可能です

     


     

    CSS記載..スタイルシートに張り付け
    エントリーPならスタイルの割り込みでもOKO

     

     

    /* 表示領域 */
    #stage {
    position:relative;
    width: 600px;
    height: 400px;
    background: #333;
    overflow:hidden;
    }
    /* 横回転サムネイル共通 */
    .photo {
    position: absolute;
    left: 200px;top:100px;
    border:#fff 2px solid;
    }
    /* 各横回転サムネイルのanimation設定 */
    #photo1 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:-15s;
    animation:slidepass 18s infinite;
    animation-delay:-15s;
    }
    #photo2 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:-12s;
    animation:slidepass 18s infinite;
    animation-delay:-12s;
    }
    #photo3 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:-9s;
    animation:slidepass 18s infinite;
    animation-delay:-9s;
    }
    #photo4 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:-6s;
    animation:slidepass 18s infinite;
    animation-delay:-6s;
    }
    #photo5 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:-3s;
    animation:slidepass 18s infinite;
    animation-delay:-3s;
    }
    #photo6 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:0s;
    animation:slidepass 18s infinite;
    animation-delay:0s;
    }
    /* 横回転サムネイルの動きワンサイクル */
    @-webkit-keyframes slidepass {
    0% {-webkit-transform:perspective(750px) rotateY(0deg) translateZ(250px);z-index:20;}
    10% {-webkit-transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
    16.7% {-webkit-transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
    26.7% {-webkit-transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
    33.3% {-webkit-transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
    43.3% {-webkit-transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
    50% {-webkit-transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
    60% {-webkit-transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
    66.7% {-webkit-transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
    76.7% {-webkit-transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
    83.4% {-webkit-transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
    93.4% {-webkit-transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
    100% {-webkit-transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
    }
    @keyframes slidepass {
    0% {transform:perspective(750px) rotateY(0deg) translateZ(250px);z-index:20;}
    10% {transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
    16.7% {transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
    26.7% {transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
    33.3% {transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
    43.3% {transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
    50% {transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
    60% {transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
    66.7% {transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
    76.7% {transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
    83.4% {transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
    93.4% {transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
    100% {transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
    }

     

    ここまで...

     

    横回転型サムネイルギャラりーCSS指定方法
    CSS形成サムネイルギャラリーカスタマイズまとめ
    トップページ

     


    横回転型サムネイルギャラりーCSS指定方法関連解説
    サムネイル画像のロールオーバー効果を3例
    シリウスサイト、記事内に配置したサムネイルギャラリーのロールオーバー3実動、(拡大、縮小、枠外オーバー)と、作動原本CSSとHTMLコード詳細
    折り込み収納から順送りでセンター表示するサムネイル画像
    折り込まれる収納位置から順送りでセンター表示する変わり種サムネイル画像の取り付け手順

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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