(cache) プラグインなしで拡大しながらフェードで切り替わるスライド

拡大しながらフェードインするスライドを実装したのでめもめも。
さらっと言ってますけど、ほんと分からなくて泣きそうになりながら実装したんだよ・・・ぐすん。

とりあえず、デモをのせますね。

フルスクリーンか通常のかはHTMLとCSSで変更し、jsは全く同じものです。

$(window).load(function(){
var slide = $('.slideshow');
var i = 0;
// ページの読み込み時にスライドの1枚目を2000ミリ秒かけてフェードイン
slide.find('.item').eq(i).fadeIn(2000).addClass('in');
// スライドの枚数を調べて変数に格納
var total = $('.slideshow .item').length -1;
// 処理を繰り返す
setInterval(function(){
  if(i < total){
  slide.find('.item').eq(i).addClass('out');
  slide.find('.item').eq(i).removeClass('in');
    j = i;
    i++;
    setTimeout(function(){
      // 1000ミリ秒後に3500ミリ秒かけてフェードインする
      slide.find('.item').eq(i).fadeIn(3500).addClass('in').removeClass('out');
    },1000);
    // 4500ミリ秒かけてフェードアウトする
    slide.find('.item').eq(j).fadeOut(4500);
  } else if(i == total){
  slide.find('.item').eq(i).addClass('out');
  slide.find('.item').eq(i).removeClass('in');
    j = i;
    i = 0;
    setTimeout(function(){
      slide.find('.item').eq(i).fadeIn(3500).addClass('in').removeClass('out');
    },1000);
    slide.find('.item').eq(j).fadeOut(4500);
  };
// この値を変更すると、処理の間隔を遅くしたり早くしたりできる
},4500);
});

setTimeout(function(){
　slide.find('.item').eq(i).fadeIn(3500).addClass('in').removeClass('out');
　},1000);
　slide.find('.item').eq(j).fadeOut(4500);
}
フェードにかかる秒数を変更する場合は、fadeOutの引数を青色の箇所の合計とあわせるようにします。

setInterval(function(){
　// ここに書いた処理が4500ミリ秒ごとに繰り返される
},4500);

今回のデモで言うと、値を6000などにすると画像の停滞時間が長くなります。

1. フルスクリーン背景バージョン［slide sample-01］

<div class="wrap">
  <h1 class="title">slide sample-01</h1>
  <div class="slideshow">
    <div class="item" style="background-image: url(images/slide01.jpg)"></div>
    <div class="item" style="background-image: url(images/slide02.jpg)"></div>
    <div class="item" style="background-image: url(images/slide03.jpg)"></div>
  </div>
</div>

.slideshow {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.slideshow .item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: none;
  background-size: cover;
  background-position: center center;
}
.in {
  -webkit-transform: scale(1);
  transform: scale(1);
  z-index: 2; 
}
.out {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: 4s;
  transition: 4s;
  z-index: 1;
}
.wrap {
  position: relative;
}
.title {
  position: absolute;
  transform: translate(calc(50vw - 50%),calc(50vh - 50%));
  z-index: 10;
  color: rgba(102, 102, 102, 0.70);
}

2. 通常スライドバージョン［slide sample-02］

<div class="slideshow">
  <img class="item" src="images/slide2-01.jpg" alt="">
  <img class="item" src="images/slide2-02.jpg" alt="">
  <img class="item" src="images/slide2-03.jpg" alt="">
</div>

.slideshow {
  position: relative;
  width: 80%;
  padding-top: 35%;
  overflow: hidden;
  margin: 0 auto;
}
.slideshow .item {
  width: 100%;
  position: absolute;
  top: 0;
  display: none;
}
.in {
  -webkit-transform: scale(1);
  transform: scale(1);
  z-index: 2;
}
.out {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: 4s;
  transition: 4s;
  z-index: 1;
 }
.title {
  text-align: center;
  color: rgba(102, 102, 102, 0.70);
  margin: 20px 0 15px 0;
}

えっと・・・こんな感じです・・・。
一応GitHubにもあげてみました。ぷるぷる。
GitHub - yurixxx8/zoom-fade-slide: It is a slide that switches with fade while expanding.

ちなみに、高解像度ディスプレイのFirefoxでみると挙動が怪しいです。
scaleで拡大される時になんだか問題ありそうです・・・。
他の方が作られた近いような感じのプラグインでも、同じ現象が起きたのでFirefox固有の何かなのでしょうかね、、、。
解決策探し中なので解決できたらまた書きます。
（5000pxくらいの画像用意すれば回避できるけど根本的な解決になっていない）