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

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

つっちー

つっちー

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

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. 画像を表示する
  2. 画像を配置する
  3. 画像を切り替える
  4. 切り替え時にクロスフェードさせる
  5. クロスフェードにズーム演出をつける

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プロパティを設定してください。

5. クロスフェードにズーム演出をつける

最後に、ズーム演出をつけることで少し目を引きましょう。opacityと同様CSSアニメーションによって実現します。

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

拡大された際に、表示領域からはみ出してしまわないよう、画像を囲っている要素にはCSSのoverflowプロパティをhiddenに設定しておきましょう。

これで完成です!

まとめ

以前はJSでしかできなかったことが、HTMLやCSSでシンプルに記述できるようになってきています。特にアニメーションは、かなりのことまでがCSSで表現可能です。JSを書く前に「もしかしてJSでなくても可能では?」と立ち止まることで、シンプルな実装を保っていきたいですね。

ではまた! つっちーでした。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

つっちー
つっちー フロントエンドエンジニア / 土屋 大輔

フロントエンドエンジニアのつっちーです。 作曲してたらエンジニアになってました。 地図が好きで、一日中眺めていられます。 推しマップは路線地図。

このメンバーの記事をもっと読む
それいけ!フロントエンド | 213 articles