【slick】ズームしながらフェードさせる方法（背景画像verあり）

今回は、スライダーを簡単に設置できるjQueryプラグインの「slick」を使用して、ズームしながらフェードさせる方法をご紹介します。

「slick」のオプションに「ズーム」する機能はないため、テコ入れは必要ですが、ホームページの雰囲気が一気に変わるため、ぜひ取り入れてください！

（ちなみに僕も、実案件の中で何度か使用しております！）

ズームしながらフェードさせる方法（画像ver）

まずはデモをご覧ください。

ゆっくりとズーム（ズームイン）しながら、フェードで切り替わる感じとなります。

HTMLから順にコードを記載しますね！

HTML

<div class="zoom-fade">
  <div class="zoom-fade__item">
    <img src="images/hero01.png" alt="">
  </div>
  <div class="zoom-fade__item">
    <img src="images/hero02.png" alt="">
  </div>
  <div class="zoom-fade__item">
    <img src="images/hero03.png" alt="">
  </div>
</div>

１点だけ、補足させてください。

スライダーを<ul>・<li>タグで組んでいる方が見受けられますが、実際には<ul>タグと<li>タグの間に勝手に<div>タグが入り、タグの使い方がおかしくなるため、上記のように<div>タグで囲んでください。

CSS

.zoom-fade {
  overflow: hidden;
  width: 600px;
  height: 400px;
  margin: 0 auto;
}

.zoom-fade__item {
  object-fit: cover;
}

/*
ズーム（ズームイン）させるためのアニメーション
コメントアウト部分を入れ替えれば、ズームアウトになります。

拡大率（scale()）はお好みで！
*/
.add-animation {
  /* アニメーション名 アニメーションにかかる時間 アニメーションの実行前後の状態 */
  /* zoom-fade 10秒 [実行前]最初のキーフレーム（0%） → [実行後]最後のキーフレーム（100%） */
  animation: zoom-fade 10s both;
}

@keyframes zoom-fade {

  0% {
    /*transform: scale(1.05);*/
    transform: scale(1);
  }

  100% {
    /*transform: scale(1);*/
    transform: scale(1.05);
  }

}

jQuery

let $slide = $('.zoom-fade')

.slick({
  autoplay: true,
  autoplaySpeed: 4000,
  arrows: false,
  dots: false,
  fade: true,
  pauseOnFocus: false,
  pauseOnHover: false,
  pauseOnDotsHover: false,
  speed: 2000
})

.on({
  beforeChange: function(event, slick, currentSlide, nextSlide) {
    $('.slick-slide', this).eq(currentSlide).addClass('remove-animation');
    $('.slick-slide', this).eq(nextSlide).addClass('add-animation');
  },
  afterChange: function() {
    $('.remove-animation', this).removeClass('remove-animation add-animation');
  }
});

$slide.find('.slick-slide').eq(0).addClass('add-animation');

書き換えが必要な箇所は、下記になります。

① スライダーの外側のクラス名（例: zoom-fade）

② slickのオプション

sliskの公式サイト
slick – the last carousel you’ll ever need – Ken Wheeler

ちなみに、人によって書き方が違うため、別verも記載します。

$('.zoom-fade').on('init', function () {
  $('.slick-slide[data-slick-index="0"]').addClass('add-animation');
})

.slick({
  autoplay: true,
  autoplaySpeed: 4000,
  arrows: false,
  dots: false,
  fade: true,
  pauseOnFocus: false,
  pauseOnHover: false,
  pauseOnDotsHover: false,
  speed: 2000
})

.on({
  beforeChange: function (event, slick, currentSlide, nextSlide) {
    $('.slick-slide', this).eq(currentSlide).addClass('remove-animation');
    $('.slick-slide', this).eq(nextSlide).addClass('add-animation');
  },
  afterChange: function () {
    $('.remove-animation', this).removeClass('remove-animation add-animation');
  }
});

上記2パターンの動作は全く一緒です。

jQueryでは、クラスのつけ外しを行なう記述を、通常のslickの記述に組み込んでいます。

ズームしながらフェードさせる方法（背景画像ver）

<img>タグでなく、背景画像（background-image）で表示させる方法も併せてご紹介します。

jQueyは先述した内容と同じため、省略します。

HTML

<div class="zoom-fade">
  <div class="zoom-fade__item"></div>
  <div class="zoom-fade__item"></div>
  <div class="zoom-fade__item"></div>
</div>

CSS

.zoom-fade {
  width: 600px;
  height: 400px;
  margin: 0 auto;
}

.zoom-fade__item {
  height: 400px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.zoom-fade__item:first-child {
  background-image: url(images/dummy01.jpg);
}

.zoom-fade__item:nth-child(2) {
  background-image: url(images/dummy02.jpg);
}

.zoom-fade__item:nth-child(3) {
  background-image: url(images/dummy03.jpg);

以上となります。

動作チェックはしておりますが、万が一動かない場合は、

「CSSやjQueryを読み込んでいるか？」
「jQueryの読み込み順番は正しいか？」

など、基本的な箇所を落ち着いて見直してください。

それでも動かない場合（ご紹介した内容）で動かない場合は、お問い合わせください。

今回は以上です。