【jQuery】スライド時にぼかし効果（ブラーエフェクト）のアニメーションを追加したスライダー（slick）の実装方法

1 コーディングテクニックの実装内容
2 コーディングテクニックの使いどころ
3 実装難易度・必要なスキル
4 CSS,JavaScriptの記述内容
5 実装のポイント

コーディングテクニックの実装内容

今回はWeb制作でjQueryのプラグインを使用したスライダー（slick）の実装に関する内容です。スライド時にぼかし効果（ブラーエフェクト）のアニメーションを追加したスライダーの実装方法をご紹介します。
jQueryスライダープラグイン : 「slick」を使用

コーディングテクニックの使いどころ

ぼかし効果を加えることでスライド切り替え時にコミカルで印象的な演出が可能です。

実装難易度・必要なスキル

コーディングとjQueryの基礎的な知識があれば実務未経験のコーダー、マークアップエンジニア、Webデザイナー、エンジニア、副業の初心者など誰でも実装可能です。

実装所要時間は10分程度

>> DEMOはこちらから！（View Demo）

>> ページの読み込みが遅い場合はこちら

CSS,JavaScriptの記述内容

実装に必要なスクリプトとスタイルはこちらになります。

$('.slider').slick({
  dots: true,
  autoplay: true,
  autoplaySpeed: 3000,
  speed: 500,
  pauseOnFocus: false,
  pauseOnHover: false,
  slidesToShow: 1,
  centerMode: true
});

$('.slider')
  .on('beforeChange', function(event, slick, currentSlide, nextSlide){
    $('.slick-list').addClass('active')
  })
  .on('afterChange', function(){
    $('.slick-list').removeClass('active')
});

.wrap {
  width: 800px;
  overflow: hidden;
  margin: 0 auto;
}

.slick-track {
  will-change: transform;
}

.slick-list {
  will-change: transform;
}

.slick-slide {
  padding: 0 100px;
}

@keyframes animate {
  0% {
    filter: url(#animate01);
    transform: scale(1, 1);
  }
  15% {
    filter: url(#animate02);
    transform: scale(1, 0.98);
  }
  30% {
    filter: url(#animate03);
    transform: scale(1, 0.95);
  }
  45% {
    filter: url(#animate04);
    transform: scale(1.1, 0.92);
  }
  60% {
    filter: url(#animate05);
    transform: scale(1.15, 0.9);
  }
  75%, 100% {
    filter: url(#animate06);
    transform: scale(1.2, 0.88);
  }
}
.active {
  animation: animate 0.1s linear forwards, animate 0.4s linear reverse forwards 0.1s;
}
@media screen and (max-width:640px){
  .wrap {
    width: 100%;
  }
}