slick.jsを使って画像を徐々に拡大させながら切替表示する方法【jQuery】｜DAD UNION

slick.jsを使って画像を徐々に拡大させながら切替表示する方法をご紹介します。
過去に紹介した「複数画像スライダープラグイン【slick.js】」ですが、画像切り替えプラグインとしては有名です。画像切り替え方法の演出としてオプションでフェードインフェードアウトやスライドは設定できますが、拡大表示させながら切り替えることはできません。今回は画像を拡大表示させながら切り替える演出を実装してみます。

Contents

slick.jsを使って画像を徐々に拡大させながら切替表示するCSSの記述
slick.jsを使って画像を徐々に拡大させながら切替表示するHTMLの記述
slick.jsを使って画像を徐々に拡大させながら切替表示するJavaScriptの記述
slick.jsを使って画像を徐々に拡大させながら切替表示するデモページ

slick.jsを使って画像を徐々に拡大させながら切替表示するCSSの記述

※slick.cssファイルを読み込みます。スライドエリア（.slider）のwidth・heightを指定し、スライドエリアからはみ出しても見えない様（overflow: hidden）にします。@keyframesと.animationで徐々に拡大表示させてます。必要に応じて変更して下さい。

<style>
body {
  margin: 20px 10px;
  padding: 0;
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 2em;
  padding-bottom: 20px;
}
.slider {
  width: 800px;
  height: 533px;
  overflow: hidden;
  margin: 0 auto;
}
.slick-img img {
  width: 100%;
}
@keyframes fdzm {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.animation {
  animation: fdzm 4s 0s forwards;
}
</style>

slick.jsを使って画像を徐々に拡大させながら切替表示するHTMLの記述

※スライドエリア（class=”slider”）内に拡大させながら切替表示する画像（1～3.jpg）を用意します。必要に応じて変更して下さい。

<h1>slick.jsを使って画像を徐々に拡大させながら切替表示</h1>

<div class="slider">
  <div class="slick-img">
    <img src="1.jpg">
  </div>
  <div class="slick-img">
    <img src="2.jpg">
  </div>
  <div class="slick-img">
    <img src="3.jpg">
  </div>
</div>

slick.jsを使って画像を徐々に拡大させながら切替表示するJavaScriptの記述

※jquery-2.1.4.min.js、slick.jsファイルを読み込みます。
「$(‘スライドエリア’).on(‘init’, function(event, slick) {スライド開始前の処理、スライド対象エリアのclassに.animationを追加}).slick({オプション})」
を記述してます。スライド開始前の処理として画像を徐々に拡大させながら切替表示する処理箇所は以下のコメントに記述してます。オプションではスライド切替演出、速度、自動切替等を設定します。

<script src="jquery-2.1.4.min.js"></script>
<script src="slick.js"></script>
<script>
$(function () {
    $('.slider').on('init', function(event, slick) {  //スライド開始前の処理
      $('.slick-slide[data-slick-index="0"]').addClass("animation");  //スライド対象エリアのclassに.animationを追加
    })
    .slick({  //スライドオプションを設定
    fade:true,
    dots: false,
    infinite: true,
    speed: 1000,
    slidesToShow: 1,
    adaptiveHeight: false,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 4000,
    pauseOnFocus: false,
    pauseOnHover: false
    })
    .on({  //スライド中の処理
      beforeChange: function (event, slick, currentSlide, nextSlide) {  //1スライド前の処理
        $(".slick-slide", this).eq(nextSlide).addClass("animation");  //スライド対象エリアの次のスライドエリアのclassに.animationを追加
        $(".slick-slide", this).eq(currentSlide).addClass("rm-animation");  //現在のスライド対象エリアのclassに.rm-animationを追加
      },
      afterChange: function () {
        $(".rm-animation", this).removeClass( //1スライド後の処理
        "rm-animation animation"  //スライドが終わった対象エリアのclassから.rm-animation .animationを削除し、CSSアニメーションを削除（リセット）
        );
      },
    });
});
</script>