CSS

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はアイデア次第で様々なことができるので、ネタを考えていきたいです。