Edited at

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

More than 1 year has passed since last update.

コンテンツの背景に、全画面の画像をフェードスライダーで演出したい!

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