CSSのみで超シンプルなフェードスライダーを実装する。

コンテンツの背景に、全画面の画像をフェードスライダーで演出したい！
だけど、JSで書くのもなぁ…とかスライダーのライブラリをわざわざ入れるのもなぁ…
なんてときに使えそうなCSSのみで簡易的フェードスライダーを実装する方法です。
CSSのみなのでパフォーマンスも良し◎です。

スライダーの機能

• FadeIn, FadeOutでのauto切り替え（無限ループ）
• 送りボタンや何枚目なのかを表示するナビゲーション等は無し

基本的な考え方

CSSだけで実装するということはご察しの通り animation を使います。
フェード切り替えの原理としては、html上で並べている画像の要素に対して、順番に opacity の0と1を繰り返すというやり方になります。
今回は背景いっぱいに表示させる3枚の画像のフェードスライダーを実装していきます。
それでは実際にコードを見ていきましょう。

HTMLを用意

まずは、スライドさせるHTML要素を用意します。
今回は<div>タグを用意し、中に3つの<span>を用意します。（画像はCSSで配置します）

HTML

<div class="fadeSlider">
  <span class="fadeSlider_01"></span>
  <span class="fadeSlider_02"></span>
  <span class="fadeSlider_03"></span>
</div>

CSSを用意

背景いっぱいに表示させるためコンテンツは fixed で固定し
画像はbackground-size: cover; でフル画面になるようにします。
各<span>は重ねるためposition: absolute;させます。
全てのCSSは以下にてご確認ください。

SCSS

.fadeSlider {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    &.fadeSlider_01 {
      background-image: url(/img/example_01.jpg);
      animation: fadeSlideImg01 15s ease-out infinite;
      animation-delay: 3s;
    }
    &.fadeSlider_02 {
      opacity: 0;
      background-image: url(/img/example_02.jpg);
      animation: fadeSlideImg02 15s ease-out infinite;
      animation-delay: 3s;
    }
    &.fadeSlider_03 {
      opacity: 0;
      background-image: url(/img/example_03.jpg);
      animation: fadeSlideImg03 15s ease-out infinite;
      animation-delay: 3s;
    }
  }
}

@keyframes fadeSlideImg01 {
    0% { opacity: 1; }
    33% { opacity: 0; }
    66% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeSlideImg02 {
    0% { opacity: 0; }
    33% { opacity: 1; }
    66% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes fadeSlideImg03 {
    0% { opacity: 0; }
    33% { opacity: 0; }
    66% { opacity: 1; }
    100% { opacity: 0; }
}

今回は画像が3枚となるので、
@keyframesではわかりやすいように33%刻みで順番にopacityを0↔1を繰り返していきます。（原始的な方法ではありますが…）

カスタマイズするには

• スライド画像の枚数によって%の数値を適宜変更（5枚であれば20%刻み）
• スライド切り替えの時間を変更するにはanimation-durationの時間を変更
• animation-delayでautoスライドの開始時間を変更

以上で、実装完了です。
animationはアイデア次第で様々なことができるので、ネタを考えていきたいです。