Cover Flow Type の Slide SHow である。以下に示すように、非常にシンプルなCSSのコードで、このようなスライドショーを作成できるとは。CSS animation もかなりのものである。ここでは、perspective とか rotationY とかのプロパティーが有力な武器となっているが、Flashのactionscript 3.0 に匹敵する機能といえよう。
ここでは、６枚のスライドが使われていて、この枚数が表示に調度よい枚数ではあるが（６枚以下では空きができる）、もっと多くのスライドを表示したい場合は、Stageの外で待機させることで作成可能である。
サンプル
本サンプル表示用HTML
<div id="stage"> <div id="photo1" class="photo"><img src="wp-images/f1.jpg" width="300" height="300"></div> <div id="photo2" class="photo"><img src="wp-images/f2.jpg" width="300" height="300"></div> <div id="photo3" class="photo"><img src="wp-images/f3.jpg" width="300" height="300"></div> <div id="photo4" class="photo"><img src="wp-images/f4.jpg" width="300" height="300"></div> <div id="photo5" class="photo"><img src="wp-images/f5.jpg" width="300" height="300"></div> <div id="photo6" class="photo"><img src="wp-images/f6.jpg" width="300" height="300"></div></div> |
本サンプル表示用CSS
/* 表示領域 */#stage { position:relative; width: 600px; height: 400px; background: #333; overflow:hidden;}/* スライド共通 */.photo { position: absolute; left: 150px;top:50px; border:#fff 2px solid; z-index:-1;}/* 各スライドのanimation設定 */#photo1 { -webkit-animation:slidepass 18s infinite; -webkit-animation-delay:-9s; animation:slidepass 18s infinite; animation-delay:-9s;}#photo2 { -webkit-animation:slidepass 18s infinite; -webkit-animation-delay:-6s; animation:slidepass 18s infinite; animation-delay:-6s;}#photo3 { -webkit-animation:slidepass 18s infinite; -webkit-animation-delay:-3s; animation:slidepass 18s infinite; animation-delay:-3s;}#photo4 { -webkit-animation:slidepass 18s infinite; -webkit-animation-delay:-0s; animation:slidepass 18s infinite; animation-delay:0s;}#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:6s; animation:slidepass 18s infinite; animation-delay:6s;}/* スライドの動きワンサイクル */@-webkit-keyframes slidepass { 0% {-webkit-transform:perspective(1000px) rotateY(-95deg) translateZ(-300px);z-index:11;} 10% {-webkit-transform:perspective(1000px) rotateY(-95deg) translateZ(-240px);z-index:12;} 16.7% {-webkit-transform:perspective(1000px) rotateY(-95deg) translateZ(-240px);z-index:12;} 26.7% {-webkit-transform:perspective(1000px) rotateY(-90deg) translateZ(-200px);z-index:13} 33.3% {-webkit-transform:perspective(1000px) rotateY(-90deg) translateZ(-200px);z-index:13} 43.3% {-webkit-transform:perspective(1000px) rotateY(0deg) translateZ(0px);z-index:14;} 50% {-webkit-transform:perspective(1000px) rotateY(0deg) translateZ(0px);z-index:14;} 60% {-webkit-transform:perspective(1000px) rotateY(90deg) translateZ(-200px);z-index:17;} 66.7% {-webkit-transform:perspective(1000px) rotateY(90deg) translateZ(-200px);z-index:17;} 76.7% {-webkit-transform:perspective(1000px) rotateY(95deg) translateZ(-240px);z-index:15;} 83.4% {-webkit-transform:perspective(1000px) rotateY(95deg) translateZ(-240px);z-index:15;} 93.7% {-webkit-transform:perspective(1000px) rotateY(95deg) translateZ(-300px);z-index:11} 100% {-webkit-transform:perspective(1000px) rotateY(95deg) translateZ(-300px);z-index:11}}@keyframes slidepass { 0% {transform:perspective(1000px) rotateY(-95deg) translateZ(-300px);z-index:11;} 10% {transform:perspective(1000px) rotateY(-95deg) translateZ(-240px);z-index:12;} 16.7% {transform:perspective(1000px) rotateY(-95deg) translateZ(-240px);z-index:12;} 26.7% {transform:perspective(1000px) rotateY(-90deg) translateZ(-200px);z-index:13} 33.3% {transform:perspective(1000px) rotateY(-90deg) translateZ(-200px);z-index:13} 43.3% {transform:perspective(1000px) rotateY(0deg) translateZ(0px);z-index:14;} 50% {transform:perspective(1000px) rotateY(0deg) translateZ(0px);z-index:14;} 60% {transform:perspective(1000px) rotateY(90deg) translateZ(-200px);z-index:17;} 66.7% {transform:perspective(1000px) rotateY(90deg) translateZ(-200px);z-index:17;} 76.7% {transform:perspective(1000px) rotateY(95deg) translateZ(-240px);z-index:15;} 83.4% {transform:perspective(1000px) rotateY(95deg) translateZ(-240px);z-index:15;} 93.7% {transform:perspective(1000px) rotateY(95deg) translateZ(-300px);z-index:11} 100% {transform:perspective(1000px) rotateY(95deg) translateZ(-300px);z-index:11}} |
CSSのスポット解説
・６枚のスライドが一斉に移動し、中央に来た時に全面表示にする。animation ワンサイクルの時間は１８秒で、３秒ずつずらして各スライドのanimationを再生させる。
・animationは、移動、静止の繰り返しを設定している。
・全面表示でないスライドの横幅はrotateY で狭くし、遠近感（奥になるほど高さを短く）は perspective プロパティーで実現している。
