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

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

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

スポンサーリンク

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

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)を指定する

おすすめ記事

スポンサーリンク