slick 画像が徐々に拡大しながらフェードするスライドの実装サンプル

メインのFV画像でよく使用されている、画像が少しずつ拡大(ズーム)してフェードで画像が切り替わるスライドのslickを使用しての実装サンプルとコードを紹介します。

特徴

  • レスポンシブ
  • ズームアニメーション
  • フェード遷移

デモ

See the Pen
jQuery Slick Slider – Fade & Zoom
by kura (@kuranopen)
on CodePen.

HTML

See the Pen
jQuery Slick Slider – Fade & Zoom
by kura (@kuranopen)
on CodePen.

主な特徴はなく、スライドを構築できるHTMLです。

CSS

.slide-animation{
    animation: fadezoom 8s 0s forwards;
}
@keyframes fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

CSSは、ズーム用のアニメーション@keyframes fadezoomとそのアニメーションを適用するクラス.slide-animationを用意します。

Javascript

var $slide = $(".slide")
  .slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    speed: 2000,
    autoplaySpeed: 4000,
    autoplay: true
  })
  .on({
    beforeChange: function(event, slick, currentSlide, nextSlide) {
      $(".slick-slide", this).eq(currentSlide).addClass("preve-slide");
      $(".slick-slide", this).eq(nextSlide).addClass("slide-animation");
    },
    afterChange: function() {
      $(".preve-slide", this).removeClass("preve-slide slide-animation");
    }
  });
$slide.find(".slick-slide").eq(0).addClass("slide-animation");

Javascriptは、スライド切り替え動作前に実行するイベントと動作後に実行するイベントそれぞれにアニメーション関連の処理を加えます。

仕組みは、画像が切り替わる動作が始まった直後に次の画像のアニメーションを開始。
そして、切り替わる前の画像に後でアニメーションを停止するためのクラスを付与します。

次の画像に切り替わったら、前の画像のアニメーションを停止して、アニメーションを停止するためのクラスを削除します。

ただこれだけだと、ページを開いたときに1枚目の画像にアニメーションがないため、最後のコードでアニメーションを開始します。

参考リンク

スポンサーリンク

スポンサーリンク

  • このエントリーをはてなブックマークに追加

【続き】 slickの便利な使い方