マークアップをキチンと考える

最終的にCSSで動作させるのか、jQueryで動作させるのかに関わらず、まずはきちんとマークアップします。そうすると以下の利点があります。

• スライドの中身が、クリックさせたいリンクの列挙だとすれば、SEOの効果も望めます。単に画像を動かすのと、見出しタグ付きの要素が動いているのとでは大違いです。
• 対象ブラウザに合わせて、実装方法を選択できます。例えば、古いIEなどでも動かしたければ、古いIEにだけIEの条件コメントで自作のjQueryを読み込む、等。
• プログレッシブ・エンハンスメントへの対応も、ほとんど出来ていることになります。

ここでは『画像とその名前を含むリンクを箇条書きにする』と考えて ul > li > a > h2,img としてみました。div.progress-barは画像の下に表示させる「スライドの表示秒数を伝える工夫」の為の部品です。

スライドさせる準備

同じhtmlに対して以下の目的でCSSを施します。

• 各<li>のリストマークを外す
• 各<li>をpositionの基準点にする
• 各h2をhover時にだけ表示させる
• お手本では縦にスライドしていますが、今回は横方向にスライドさせたいので、各<li>を横並びにする

h2の出現時に動きをつける

hover時の演出にCSS3のtransitionを加えてみます。上記のSAMPLE 2との違いを、マウスオーバーして比べて下さい。

要素Aにtransionプロパティをつけると、要素Aが要素A’に変化する「途中」をアニメーションの様に表示できます。Adobe Flashを使ったことがある人は、タイムラインのキーフレームを設定する、と考えるとイメージし易いかもしれません。
要素にマウスオーバーするとhover疑似クラスが付いて、AからA’に変化しますから、これを利用するのが最も使えるパターンです。
他にもtarget、active、select疑似クラスも使えます。また、jQueryでclassを操作しても良いでしょう。

各<li>にCSS3のanimationを設定する

transitionとanimationは似ていますが、いくつかの点で大きく異なります。整理してみましょう。

スライドショーの場合は、ループさせ続ける必要があるので、animationを使用する訳です。div#sampleAnimeをanimationさせてみましょう。

CSS3のanimationの指定は以下の様に行います。

1. 動かしたい要素のセレクターにanimationプロパティを指定します。ショートハンドで書くと「キーフレーム名 アニメーションにかかる時間 イージング 遅延時間 繰り返しの回数 再生方向」となります。「キーフレーム名」は必須ですし、再生秒数も書かないと0秒になるので指定します。div#sampleAnimeの設定は以下の通りです（分かり易くする為に、繰り返しの回数をinfiniteにしました）。
   
   #sampleAnime { /* この記事を書いている時点ではベンダープレフィックスが必要 */ -moz-animation:hogehoge 5s infinite; -webkit-animation:hogehoge 5s infinite; animation:hogehoge 5s infinite; }

   1 2 3 4 5 6

   #sampleAnime { /* この記事を書いている時点ではベンダープレフィックスが必要 */ -moz-animation:hogehoge 5s infinite; -webkit-animation:hogehoge 5s infinite; animation:hogehoge 5s infinite; }

2. キーフレームの書式は以下の通り。一つのkeyframesの中カッコの中に、各タイミングを現す n% をセレクタにした中カッコが入れ子になる構造です。
   
   @keyframes hogehoge { 0% { margin-left: 10px; background-color: #f00; } 20% { margin-left: 50px; } 100% { margin-left: 50px; background-color: #ff0; } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   @keyframes hogehoge { 0% { margin-left: 10px; background-color: #f00; } 20% { margin-left: 50px; } 100% { margin-left: 50px; background-color: #ff0; } }

   
   @keyframesで、注意すべき事が3つあります。
   • 各タイミングで指定しなかったプロパティは、変化が継続します。div#sampleAnimeでは、margin-leftは0→20%で10pxから100pxへとアニメーションし、20%→100%では変化しません。20%の時にbackground-colorを書いていないので、background-colorは0→100%にかけて色が変化します。
   • この記事を書いている時点では、@keyframesにもベンダープレフィックスをつけたものを用意する必要があります。@-moz-keyframes hogehoge{}、@keyframes hogehoge{}、@keyframes hogehoge{}を用意すれば良いでしょう。animation-nameは同じで大丈夫です。
   • この記事を書いている時点では、linear-gradientをanimationすることはできません。また、:afterや:beforeで作った疑似要素はFirefoxならanimationできますが、SafariやChromeではanimationできません。

スライドショーの@keyframes

各スライドの共通の動作は以下の順で行うことにします。

1. 右からフレームイン
2. ちょっと止まる
3. 左へフレームアウト

お手本の@keyframesでは、各スライド毎に別のルールを設定していますが、工夫すれば1つの@keyframesで実装できます。

動作が分かりやすい様に、完成時に表示したいエリアのdiv.maskを追加して、赤いボーダーをつけた状態でアニメーションを表示してみます。

1. まず、各スライドに同じ@keyframesで動く様に指定
2. その後で遅延時間のanimation-delayだけを個別に変更

一つの@keyframesと、スライド毎のdelayで、全てのスライドの動きを処理しているのが、この設定のミソです。

-moz-と-webkit-のベンダープレフィックス付き@keyframesを用意しても3つで済みます。

以下の計算式で任意のスライド枚数のanimation-delayを求めることができます。

hoverしたらanimationを一時停止させる

animation-play-stateを各<li>のhoverに設定すると、そのスライドのアニメは止まりますが、他のスライドは動き続けます。

これでは、hoverの後でアニメがずれてしまうので、どのスライドにhoverしても、全てのアニメーションが止まる様にしなければなりません。そこで、セレクターにちょっとした工夫をします。SAMPLE LI:hoverと以下のSAMPPLE MASK:hoverにマウスをのせて、動作を比較しましょう。

div.progress-barにもanimationを設定する

.progress-bar の@keyframesでは、お手本の@keyframesに習って、keyframeの%を、列挙する形でセレクタ指定してみました。スマートなやり方ですね。
また、hover時に、.progress-barもスライドと同様に一時停止しておきます。

表示させるエリアだけを見せて、他を隠す

仕上げに、.maskのoverflowをhiddenして完成です。
ここまで説明の為にclassを追加しながらcssを足し込んでいて、ちょっと判りづらい所もあったので、id=complete として整理し直したhtmlとcssにしました。ベンダープレフィックスも書いてあります。

まとめ

ちょっと疲れました

思った以上にボリュームのある内容になりました。しかし、ベンダープレフィックスがある為に記述量が増えてしまいがちな@keyframesについて、スライド個別に作成しないで良い事に気付けたのは収穫でした。

スライドショーの使い道

Web表現としては手垢がついた感もあるスライドショーですが、TOPページでお為ごかしに使っているだけでは勿体ないです。
画面上で動いている物に目がいくのは人間の性なので、注目を引く効果があるのはもちろんです。が、それだけではありません。
スライドショーは、ほんの少しのアイデアと工夫で、様々なバリエーションへ発展できる表現です。例えば…

• 最新情報をNews Ticker風に表示
• Twitterのつぶやきを電光掲示板風に表示
• CSS3のtransformでアニメーションさせてサイバー空間風に表現
• レトロな額縁の中で動かして懐かしの紙芝居を再現
• 高速にスライドを切り替えてパラパラ漫画風に
• ウィンドウ全体の背景画像かと思わせて、実は画面一杯の大きなスライドショー！
• etc…

仕上げの細部にこだわろう

動きの細部（スピード・イージング・フェード）の演出しだいで、がらりと印象が変わるのもスライドショーの面白さです。どんな演出がしたいのか、よく考えましょう。

• ゆっくりと大きな画像を動かしたり、クロスフェードさせれば、優雅な表現に。
• フレームインとフレームアウトをキビキビと動かして、力強いプレゼン的な説得力を持たせた表現に。
• 少しだけ行き過ぎたスライドをバウンドさせて戻したりして、人間臭さを出した表現に。
• 画面を分割して、別々のタイミングでスライドさせることで、海外ドラマ 24風の緊迫感を。

CSSスライドショーはスマートフォンに最適！（かな？）

スマートフォンやタブレット端末のブラウザは、CSS3に対応している前提で作成できるので、こうしたCSSでの演出に向いていると言えます。Flash非対応のデバイスだからjQueryで！と短絡する前に、CSSでも出来るようにしておく事で、選択肢が広がります。
興味とチャレンジ精神のある人は、是非、自分でCSSスライドショーを作ってみて下さい。3パターンくらいを作り終える頃には、css animationを自在に操れるようになるはずです。