サムネイル画像が連なって円運動している状態で、水平になったサムネイル画像を拡大して、表示枠いっぱいに表示させるタイプのスライドショーである。
このサンプルでは、幅600pixの写真を表示させているが、他のサイズの写真をそろえて、cssのmax-widthをそのサイズに代えれば、他のコードはそのままで、そのサイズのスライドショーになる。したがって、画面サイズに応じて表示サイズが変化する、いわゆる、レスポンシブタイプになっている。
また、枚数を変更するときにどのような記述にすればよいかという質問をよく受けるが、@keframes内の記述が肝で、100% ÷ 枚数の%値でスライド移動の区切りをつけるようにすること。他の稿で何度も説明しているので、そちらのコメント欄を参考にしてほしい。
なお、ここでは、サムネイルを半円で移動させているが、スライド数が増えればフルの円で移動させることも可能であり、また、円のトップであふれたスライドを待機させるようにすれば、スライド数がもっと増えても作成は可能である。
サンプル（DEMO）
準備
ここでは、1000*563の写真を8枚用意した。
ただし、ここでの表示は、cssのmax-widthを600pxにして、幅600pixで表示させている。すなわち、max-widthで表示サイズが決定され、他の記述は同じでよい。もちろん、表示サイズ相応のサイズの写真が用意されなければならないが。
本サンプル表示用HTML
<!-- 標示総枠 --><div id="stage"><!-- サムネイル表示枠 --> <div id="thumbs"><!-- 表示写真 --> <div id="t1" class="thumb"><img src="wp-images/m1.jpg"></div> <div id="t2" class="thumb"><img src="wp-images/m2.jpg"></div> <div id="t3" class="thumb"><img src="wp-images/m3.jpg"></div> <div id="t4" class="thumb"><img src="wp-images/m4.jpg"></div> <div id="t5" class="thumb"><img src="wp-images/m5.jpg"></div> <div id="t6" class="thumb"><img src="wp-images/m6.jpg"></div> <div id="t7" class="thumb"><img src="wp-images/m7.jpg"></div> <div id="t8" class="thumb"><img src="wp-images/m8.jpg"></div> </div><!-- stageに高さを設ける（高さ/幅*100%）--> <div style="padding-top:56.3%;"></div></div> |
本サンプル表示用CSS
/* 表示総枠（max-widthを変えるとそのサイズで表示） */#stage { max-width:1000px;background:#999;position:relative; }/* サムネイル表示枠 */#thumbs { width:100%; }/* サムネイル画像 */.thumb img { width:12%; transform-origin:-100% 50%; position:absolute; top:45%; left:45%;}/* サムネイル画像のaniomation設定 */#t1 img { animation:thumbRotation 48s linear infinite;animation-delay:-12s; }#t2 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay:-6s; }#t3 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay: 0s; }#t4 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay: 6s; }#t5 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay:12s; }#t6 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay:18s; }#t7 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay:24s; }#t8 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay:30s; }/* animation */@keyframes thumbRotation { 0% { transform:rotate(-90deg) } 1% { transform:rotate(-60deg) } 12.5% { transform:rotate(-60deg) } 13.5% { transform:rotate(-30deg) }25% { transform:rotate(-30deg) }26% { transform:rotate( 0deg); }27% { transform:rotate( 0deg);width:10%;top:45%;left:45%;z-index:0; }28% { transform:rotate( 0deg);width:100%;top:0;left:0;z-index:100; }36.5% { transform:rotate( 0deg);width:100%;top:0;left:0;z-index:100; }37.5% { transform:rotate( 0deg);width:10%;top:45%;left:45%;z-index:0; }38.5% { transform:rotate( 30deg) }50% { transform:rotate( 30deg) }51% { transform:rotate( 60deg) }62.5% { transform:rotate( 60deg) }63.5% { transform:rotate( 90deg) }75% { transform:rotate( 90deg);opacity:1; }76% { transform:rotate( 120deg);opacity:0; }87.5% { transform:rotate( 270deg);;opacity:0; }88.5% { transform:rotate( 270deg);opacity:1; }100% { transform:rotate( 270deg); opacity:1; }} |
CSSのポイント説明
・#stageのmax-widthで表示サイズを決めている。
・サムネイル（.thumb img）の幅は、ここでは用意した写真の12%としていて、拡大表示するときは、枠内100%に拡大する。
・transform（回転）の中心を、transform-origin:-100% 50%;としているので、枠外の点を中心にサムネイルが円運動をする。
・animationは同じ@keyframes記述を使い、開始の時間にラグをつけて、順次、移動・拡大・縮小・移動するようにしている。