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

TOP > jQuery > 【jQuery】transform:scale()でスライダー(slick)をズームアウトしながら切り替えるテクニック/Slick Zoom Out Effect

【jQuery】transform:scale()でスライダー(slick)をズームアウトしながら切り替えるテクニック/Slick Zoom Out Effect

スポンサーリンク

この記事は2018年10月23日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

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

scale()でスライダー(slick)をズームアウトしながら切り替えるテクニックをご紹介します

実装所要時間:15分程度
難易度:初心者コーダーでも実装可能

CSS,JavaScriptの記述内容

実装に必要なスクリプトとスタイルはこれだけです。

$(function(){
  $('.slider').slick({
    fade: true,
    arrows: false,
    autoplay:true,
    autoplaySpeed:1500,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false
  });
});
.slider img {
  transform-origin: center top;
  transform: scale(1.1);
  transition: 5s ease-out;
}
.slider .slick-active img {
  transform: scale(1.0);
}

実装のポイント

  • 1. スライダーはslickを使用
  • 2. スライダーのimgタグにscale(1.1)を指定してスライド画像を1.1倍の大きさにしておく。transitionでアニメーションも指定する
  • 3. 中央の画像に.slick-activeのclassが付与されたらscale(1.0)を指定する

スポンサーリンク