css3のanimationで作る永久ループのスライドショー

Pure CSS3 Cycle Slider」をお手本にして、css3のanimationで永久ループするスライドショーを作ります。

とても美しい動作ですので、まずは動作を確認して下さい。

  • 画像にマウスホーバーすると、スライドが止まる
  • マウスホーバーで画像に対応するh1が現れる
  • スライドの表示秒数を伝える工夫もされている

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

最終的に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は似ていますが、いくつかの点で大きく異なります。整理してみましょう。

CSS3のtransitionとanimationの違い
注目ポイント transition animation
再生秒数の設定 transition-duration animation-duration(CSSのショートハンドで指定する場合は先に書かれた秒数)。デフォルトは0秒なので何らかの時間を指定することになる。
開始時間を遅らせる transition-delay animation-delay(ショートハンドで指定する場合は後に書かれた秒数)
イージングの使用 transition-timing-function animation-timing-function
変化させるcssプロパティの選択 transition-property キーフレームの中で指定する。
キーフレームの使用 できない animation-nameで指定する。必須。
繰り返しの回数の指定 できない animation-iteration-count(0以上の整数か、infiniteで永久にループを指定できる)
繰り返しの方向指定 できない animation-direction(normalで毎回0→100%で動く。alternateで、偶数回は100→0%へと逆方向に動く。)
一時停止 できない animation-play-state(runningで動く。pausedで一時停止)
アニメーションの実行前や実行後のスタイル指定 できない animation-fill-mode(none , forwards , backwards , both が指定可能。)

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

この要素がdiv#sampleAnimeです。

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

  1. 動かしたい要素のセレクターにanimationプロパティを指定します。ショートハンドで書くと「キーフレーム名 アニメーションにかかる時間 イージング 遅延時間 繰り返しの回数 再生方向」となります。「キーフレーム名」は必須ですし、再生秒数も書かないと0秒になるので指定します。div#sampleAnimeの設定は以下の通りです(分かり易くする為に、繰り返しの回数をinfiniteにしました)。
  2. キーフレームの書式は以下の通り。一つのkeyframesの中カッコの中に、各タイミングを現す n% をセレクタにした中カッコが入れ子になる構造です。

    @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を求めることができます。

n番目に出現するスライドのanimation-delayの計算式
x=SN⁢ * (n⁢-⁢1)
  • S(秒) = animation-duration
  • N(個)= スライドの総数(2以上の自然数)
  • n(番目)= スライドの出現順
  • x(秒)= n番目に出現するスライドのanimation-delay

12秒で3個のスライドをループさせる場合の各スライドのanimation-delay

  • 1つ目:
    0=123⁢ * (1⁢-⁢1)
  • 2つ目:
    4=123⁢ * (2⁢-⁢1)
  • 3つ目:
    8=123⁢ * (3⁢-⁢1)

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を自在に操れるようになるはずです。

css3のanimationで作る永久ループのスライドショー」への6件のフィードバック

  1. ピンバック: 2012-9-21勉強会 | パソコン倶楽部りんご

  2. 真中のぶ真中のぶ

    寝る前に、ちょっとサイトを確認と思って、気軽に記事を見てびっくりしました。
    気軽な内容じゃないですね!!!!時間のある時にしっかり見ます。

    とりあえず、お疲れ様でした。

    返信
  3. ピンバック: 2012-9-21勉強会 | パソコン倶楽部りんご

  4. ピンバック: WordPressで複数ヘッダー画像をcssスライドショーで動かす | パソコン倶楽部りんご

  5. はなこ

    説明はわかりやすいのですが、cssを追加していった時にhtmlのclass名なども変化しててそこも一緒に伝えてくれないとわかりづらいです。
    sample1から2の横並びにするだけで既にわかりづらくてびっくりしました。

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA