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

TOP > jQuery > 【jQuery】transform:scale()を使用してスライダー(slick)をズームアウトしながら切り替える方法

【jQuery】transform:scale()を使用してスライダー(slick)をズームアウトしながら切り替える方法

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

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

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

要素を拡大・縮小表示させるtransform: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)を指定してスライド画像を拡大させておく。
    同様にimgタグへtransitionでtransition-durationやtransition-timing-functionを指定する
  • 3. slickを使用すると表示画像を囲むタグに対して.slick-activeが自動的に付与される(今回のデモページではliタグに付与)
    liタグに.slick-activeが付与された時のimgタグにscale(1.0)を指定することで画像が拡大→縮小されズームアウトの動きとなる

スポンサーリンク