【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>

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

スライダーを<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の読み込み順番は正しいか?」

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

 

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

 

今回は以上です。

SNSでもご購読できます。