あなたのキモチ つなげるカタチ

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

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

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

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

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

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

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

実装所要時間は10分程度

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%;
  }
}

実装のポイント

現在制作中

この記事を書いた人(著者情報)

片岡 学

カタチップ編集長。昭和生まれの30代でWeb業界歴は15年。プログラマー出身のWebデザイナー。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのディレクター兼コーダーを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク