More than 5 years have passed since last update.

javascript12行で書くfadeIn, fadeOutスライドショー

Last updated at 2016-04-27Posted at 2016-04-25

※cssのみで実装するverも最下部に追加いたしました！

ある案件で5枚のスライドをフェードイン・フェードアウトするスライドショーを作る必要があったのでシンプルに実装できる方法を探してました。

実装方法としては、

フェードイン・フェードアウトはcss3のtransitionに任せる
javascriptはcssのクラス付け替えのみ

というシンプルな感じで作りました。

それでできたのがこちら

<div class="bgs">
  <!-- 初期表示のためis_activeをつける -->
  <div class="bg bg--1 is_active" id="js-first"></div>
  <div class="bg bg--2"></div>
  <div class="bg bg--3"></div>
  <div class="bg bg--4"></div>
  <div class="bg bg--5"></div>
</div>

javascript

var $first_bg = $('#js-first'), //1枚目のスライドを登録
    $current_bg = $first_bg; //現在のスライドを1枚目にセット

setInterval(function(){
  //DOMを見て現在のスライドの次の要素があればそれを登録
  //現在のスライドが最後の要素の場合、1番目のスライドを登録
  var $next_bg = $current_bg.next()[0] ? $current_bg.next() : $first_bg;
　　　　
  //現在のスライドからis_activeを削除、次のスライドにis_activeを付与
  $current_bg.removeClass('is_active');
  $next_bg.addClass('is_active');
  
  //現在のスライドに今is_activeを付与したスライドをセット
  $curreng_bg = $next_bg;

}, 5000);//5秒ごとにスライドを変更


*{box-sizing: border-box;}

html, body{height: 100%;}

.bgs{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bgs .bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 3s ease; /* ここでスライド切り替えのアニメーションを設定 */
}
/* .is_activeというクラスが付いているものだけopacityを1にして見えるようににします */
.bgs .bg.is_active{opacity: 1;}

/* スライド1枚1枚に色をつけます */
.bgs .bg.bg--1{background: red;}
.bgs .bg.bg--2{background: blue;}
.bgs .bg.bg--3{background: yellow;}
.bgs .bg.bg--4{background: purple;}
.bgs .bg.bg--5{background: green;}

っていう感じです。
基本的にwrapperのDOM（.bgs）の中にある1枚1枚のDOMの次を見ていって、
次がない場合に最初のDOMに戻るみたいな感じで実行してます。

DOMの構造に依存してしまったり、スライドのx番目にすぐ移動したい！とかができないかもしれませんが、
ある秒数でフェードイン・フェードアウトでスライドを変えたいとかの場合は使えると思います！

html1枚にまとめてみるとこんな感じになりましたので試してみたい方はコピーして使ってみてください！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    *{box-sizing: border-box;}

    html, body{height: 100%;}

    .bgs{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .bgs .bg{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 3s ease;
    }
    .bgs .bg.is_active{opacity: 1;}

    .bgs .bg.bg--1{background: red;}
    .bgs .bg.bg--2{background: blue;}
    .bgs .bg.bg--3{background: yellow;}
    .bgs .bg.bg--4{background: purple;}
    .bgs .bg.bg--5{background: green;}
  </style>
  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <title>Document</title>
</head>
<body>
  <div class="bgs">
    <div class="bg bg--1 is_active" id="js-first"></div>
    <div class="bg bg--2"></div>
    <div class="bg bg--3"></div>
    <div class="bg bg--4"></div>
    <div class="bg bg--5"></div>
  </div>
  <script>
    var $first_bg = $('#js-first'), //スライド部分の最後に行った時に1枚目を登録するために変数に置く
    $current_bg = $first_bg; //現在のスライドを1枚目にセット

    setInterval(function(){
      //DOMを見て現在のスライドの次の要素があればそれを登録
      //現在のスライドが最後の要素の場合、1番目のスライドを登録
      var $next_bg = $current_bg.next()[0] ? $current_bg.next() : $first_bg;
    　　　　
      //現在のスライドからis_activeを削除、次のスライドにis_activeを付与
      $current_bg.removeClass('is_active');
      $next_bg.addClass('is_active');

      //現在のスライドに今is_activeを付与したスライドをセット
      $curreng_bg = $next_bg;

    }, 5000);//5秒ごとにスライドを変更
  </script>
</body>
</html>

※12行でって書いてましたが、コメントを入れると多くなってしまいました(　；∀；)

追記

cssのみで実装するverもコメントいただきました

.bgs .bg.bg--1{
  background: red;
  animation: fadeinout 25s 0s infinite;
}
.bgs .bg.bg--2{
  background: blue;
  animation: fadeinout 25s 5s infinite;
}
.bgs .bg.bg--3{
  background: yellow;
  animation: fadeinout 25s 10s infinite;
}
.bgs .bg.bg--4{
  background: purple;
  animation: fadeinout 25s 15s infinite;
}
.bgs .bg.bg--5{
  background: green;
  animation: fadeinout 25s 20s infinite;
}

@keyframes fadeinout {
  0% {opacity: 0}
  5% {opacity: 1}
  25% {opacity: 1}
  30% {opacity: 0}
  100% {opacity: 0}
}

fadeinoutという名前のkeyframeにopacityが0から1になって0に戻るアニメーションを作成します。
そして、各.bgにanimcationを設定、delay（開始までの遅延）をずらして設定することでfadeIn, fadeOutを作成します。
@takumisaito 様ありがとうございました！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up