さよならIE9！CSSアニメーションでシンプルなスライドショーを作ってみた

つっちー

2017.05.10

こんにちは。フロントエンドエンジニアのつっちーです。

2017年4月12日、ついにWindows Vistaのサポート終了しましたね。これによってInternet Explorer 9のサポートも終了（※1）となりました。CSSアニメーションも、display:flexもやっと遠慮なく使える！（※2）ということで今回は、クロスフェード式のスライドショーを、IE9を切り捨てることでよりシンプルに実装してみましょう。

※1 Windows　Serverを除く
※2 接頭辞-ms-は必要

今回つくるスライドショー

まずは完成した状態を確認してみましょう。

See the Pen 1702-completed by ligdsktschy (@lig-dsktschy) on CodePen.

一定時間ごとに画像がクロスフェードするスライドショーです。演出としてズームの効果も加えてあります。

ちなみにこれをCSSアニメーションを使わず実装したものがこちら。

See the Pen 1702-jquery by ligdsktschy (@lig-dsktschy) on CodePen.

CSSが減っている分、JSがかなり複雑になってしまいました。

CSSアニメーションを利用すると、アニメーション部分をシンプルに記述できるので、JSが他の処理にリソースを割く余裕も生まれます。JSでしか実現できない処理が多くあるため、これも大きなメリットと言えるでしょう。

ではさっそく作っていきますね。次のように手順を分けて進めていきます。

画像を表示する
画像を配置する
画像を切り替える
切り替え時にクロスフェードさせる
クロスフェードにズーム演出をつける

1. 画像を表示する

まずは使用する画像を画面に表示させてみましょう。

See the Pen 170201 by ligdsktschy (@lig-dsktschy) on CodePen.

画像の表示には、img要素でなく、CSSのbackground-imageプロパティを使用しています。これは、background-imageと共に使用できる、background-positionプロパティ、background-sizeプロパティがとても便利だからです。

background-positionはcenterを設定。これにより、常に画像の中央が要素の中央に位置します。

background-sizeにはcoverを設定しています。この設定は、要素と画像の縦横比が異なるときに、画像を要素全体で覆うことのできる最小サイズまで、縦横比を維持し拡大縮小します。実際の動作を見る方が理解しやすいので、CODEPEN上のサンプルを別ウインドウに表示し、ウインドウサイズを変動させてみてください。

2. 画像を配置する

クロスフェードするスライドショーなので、それぞれの画像は同じ位置にある必要があります。すべての画像を囲う要素を用意し、それぞれの画像は同じ位置に重ねて配置しましょう。

See the Pen 170202 by ligdsktschy (@lig-dsktschy) on CodePen.

3. 画像を切り替える

画像は同じ位置に重なっているため、CSSのz-indexプロパティを増減させることで表示／非表示を切り替えられます。z-indexの値を変化させるis-visibleというクラスを用意し、これを付け外しするためのJSも書いていきます。

See the Pen 170203 by ligdsktschy (@lig-dsktschy) on CodePen.

次はswitchImageという関数が画像の切り替えです。この関数は、今表示している画像を非表示にして＝is-visibleクラスを外し、次の画像を表示します＝次の画像にis-visibleクラスを付与します。設定しておいた時間が経過した後、再びswitchImageの実行を予約します。ここではswitchImage実行の間隔を5秒に設定しました。つまり、5秒ごとに画像が切り替わります。

4. 切り替え時にクロスフェードさせる

クロスフェードをCSSアニメーションによって実現しましょう。

See the Pen 170204 by ligdsktschy (@lig-dsktschy) on CodePen.

可視状態と不可視状態の間を、時間をかけ徐々に変化していくために、transitionプロパティを用いてopacityプロパティをアニメーションさせています。transitionの所要時間（transition-duration）は、画像切り替えの所要時間より短く、3.5秒に設定しました。これは、5秒（画像切り替えの所要時間） – 3.5秒（transitionの所要時間） = 1.5秒の間はフェードせず完全な可視状態が続くからです。transitionの所要時間を、画像切り替えの所要時間と一致させると、完全な可視状態が一瞬となってしまい、スライドショーとしては慌ただしくなってしまうため、このようにしています。

transitionの速度変化曲線（transition-function）は、変化の最初と最後をゆるやかに設定し、より滑らかに見えるよう調整しています。CSSが標準で用意しているease,linear以外の設定が必要なときは、cubic-bezier関数を使用します。今回は、こちらのサイトを参考にして、easeInOutQuadの曲線を設定しました。今回は、以上の設定をtransitionの行きと帰りに適用したいので、transitionプロパティはアニメーションする要素自体に設定します。もし、transitionの行きと帰りを別の設定を使用したい場合は、アニメーションの到達点を表すクラスや擬似クラスに行きのtransitionプロパティを、アニメーションする要素自体に帰りのtransitionプロパティを設定してください。