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”＞
この２つのリストに対して、メイン画像用リストのみを囲う＜div id=”slidemask”＞と
メイン画像とサムネイル画像全てのリストを囲う＜div id=”slidewrap”＞の２つ用意しています。
そしてこれらを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のみでスライドアニメーションが必要になった際のご参考までに。。。