SCRIPT無しでCSS3のみでアニメーション動作を実装させるサンプル。
今回は自動でスライド(スクロール)する画像ギャラリーの紹介。
初めに完成サンプルから。
※動作環境はWebkitブラウザのSafariやChromeのみです!
CSS3 AUTO SLIDE GALLERY
メイン画像と併せて、下位置にサムネイル画像を並べて、
オートスタート形式で順々に画像がスライドします。
現在表示している画像のサムネイルは、
透過度が100%になり、通常サイズよりも1.2倍の大きさに拡大し、
ドロップシャドウ(白)が付けます。
※画像ではなくCSS3でのドロップシャドウ。
全体構成について、まずはHTMLソースから。
メイン画像とサムネイル画像は別々のリストで形成しています。
◆HTML <div id="slidewrap"> <div id="slidemask"> <ul id="photo"> <li id="slide01"><img src="img/photo01.jpg" width="500" height="375" alt=""><span>【PHOTO-01】</span></li> <li id="slide02"><img src="img/photo02.jpg" width="500" height="375" alt=""><span>【PHOTO-02】</span></li> <li id="slide03"><img src="img/photo03.jpg" width="500" height="375" alt=""><span>【PHOTO-03】</span></li> <li id="slide04"><img src="img/photo04.jpg" width="500" height="375" alt=""><span>【PHOTO-04】</span></li> </ul> </div><!--/#slidemask--> <ul id="thumb"> <li id="thumb01"><a href="#"><img src="img/photo01.jpg" width="125" height="94" alt=""></a></li> <li id="thumb02"><a href="#"><img src="img/photo02.jpg" width="125" height="94" alt=""></a></li> <li id="thumb03"><a href="#"><img src="img/photo03.jpg" width="125" height="94" alt=""></a></li> <li id="thumb04"><a href="#"><img src="img/photo04.jpg" width="125" height="94" alt=""></a></li> </ul> </div><!--/#slidewrap-->
・メイン画像用リスト<ul id=”photo”>
・サムネイル画像用リスト<ul id=”thumb”>
この2つのリストに対して、メイン画像用リストのみを囲う<div id=”slidemask”>と
メイン画像とサムネイル画像全てのリストを囲う<div id=”slidewrap”>の2つ用意しています。
そしてこれらをCSS3を使って動かします。
◆CSS /* SlideArea -------------------------- */ #slidewrap { margin: 0 auto; padding: 20px 20px; width: 500px; text-align: left; background: #333; } #slidewrap ul li { list-style: none; } #slidemask { width: 500px; height: 375px; overflow: hidden; position: relative; } /* PhotoSlideArea -------------------------- */ ul#photo { top: 0; left: 0; width: 2000px; height: 375px; position: absolute; } ul#photo li { width: 500px; height: 375px; float: left; position: relative; } ul#photo li span { bottom: 0; left: 0; padding: 0 10px; width: 480px; height: 30px; line-height: 30px; color: #fff; font-weight: bold; background: #333; position: absolute; opacity: 0.5; } /* ThumbnailBTN -------------------------- */ ul#thumb { width: 500px; height: 94px; } ul#thumb li { width: 125px; height: 94px; float: left; } ul#thumb li img { opacity: 0.5; } ul#thumb li:hover {opacity: 1;} /* CSS3 PhotoSlideAnimation -------------------------- */ @-webkit-keyframes AutoSlidePhoto { 0% {left: 0;} 20% {left: 0;} 25% {left: -500px;} 45% {left: -500px;} 50% {left: -1000px;} 70% {left: -1000px;} 75% {left: -1500px;} 95% {left: -1500px;} 100% {left: 0;} } ul#photo { -webkit-animation-name: AutoSlidePhoto; -webkit-animation-duration: 20s; -webkit-animation-iteration-count:infinite; } /* CSS3 ThumbnailSlideAnimation -------------------------- */ @-webkit-keyframes AutoSlideThumb { 0% {opacity: 0.5;-webkit-transform:scale(1);} 1% {opacity: 1;-webkit-transform:scale(1.2);-webkit-box-shadow: 0 0 10px #fff;z-index:10;} 20% {opacity: 1;-webkit-transform:scale(1.2);-webkit-box-shadow: 0 0 10px #fff;z-index:10;} 21% {opacity: 0.5;-webkit-transform:scale(1);} 100% {opacity: 0.5;-webkit-transform:scale(1);} } ul#thumb li#thumb01 img, ul#thumb li#thumb02 img, ul#thumb li#thumb03 img, ul#thumb li#thumb04 img { -webkit-animation-name: AutoSlideThumb; -webkit-transform: scale(1); -webkit-animation-duration: 20s; -webkit-animation-iteration-count: infinite; } ul#thumb li#thumb02 img {-webkit-animation-delay: 5s;} ul#thumb li#thumb03 img {-webkit-animation-delay: 10s;} ul#thumb li#thumb04 img {-webkit-animation-delay: 15s;}
アニメーション設定箇所で「AutoSlidePhoto」と定義したアニメーション動作で
メイン画像を置いている<ul>の位置「left」の値を変化させてスライドさせています。
もう一つのアニメーション定義「AutoSlideThumb」では、
サムネイルの透過度/拡大/ドロップシャドウのアニメーション動作を設定します。
各サムネイル画像に対して「AutoSlideThumb」定義を実行させますが、
動作開始時間を決める「-webkit-animation-delay」の値を変え、
同じアニメーション動作の開始時間をズラすことで
順々にアニメーションが動作しているように見せています。
全体構成についてはこんな感じです。
本来はサムネイルクリックで
メイン画像とサムネイル画像を動かしたいのですが
まだその部分は「CSS3のみ」の構成では実現できていません。。。
(一度オートスタートさせてしまったCSS3アニメーションは動作の停止などが難しい…)
このサンプルを元にカスタマイズを重ね、
jQueryでのスライドギャラリーと同じ規模のものが
CSS3のみで実現できないかいろいろ試してみたくなります。
CSS3のみでスライドアニメーションが必要になった際のご参考までに。。。