プラグインを使わないjQueryクロスフェード

背景などで流しっぱなしにする時に使えそうなクロスフェードするスライドショーをプラグインを使わずに書いてみたいと思います。

サンプルコード

DEMO

HTML

<div class="wrapper">
  <div style="background-image: url(https://picsum.photos/6858/4574?image=1080);"></div>
  <div style="background-image: url(https://picsum.photos/5472/3648?image=1070);"></div>
  <div style="background-image: url(https://picsum.photos/5472/3648?image=835);"></div>
</div>

SCSS

.wrapper{
  width: 100%;
  height:100vh;
  position:fixed;
  div{
    height:100%;
    width:100%;
    background-size: cover;
    position: absolute;
    top:0;
    left:0;
  }
}

JS

$(function(){
  $('.wrapper div:gt(0)').hide();
  var interval = 6000,
      anim = (function () {
      var i = 0,
          timing = interval / 1000 * 60;
      return function () {
          if (i % timing === 0) {
              $('.wrapper div:first-child').fadeOut(2000).next('div').fadeIn(2000).end().appendTo('.wrapper');
          }
          i++;
      };
  })();
  (function animloop() {
      anim();
      window.requestAnimationFrame(animloop);
  })();
});

requestAnimationFrameでおよそ毎秒60回(60fps)でiに加算されていって大体６秒のインターバルで（iの値が360で割り切れる時）に一番上のdivがfadeOutしていって一番最後に追加されるみたいな感じでクロスフェードしてます。正確にインターバルの時間を図りたかったらやっぱりsetInterval使ったほうがわかりやすいかもしれない。

クロスフェードぐらいだったらそこまで時間をがっつり制御しなくてもいいのかなと思って参考サイト様のやり方を参考に書いてみました。簡単でいい方法があれば教えてください。

参考

いまさらrequestAnimationFrameを理解する