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

1 コーディングテクニックの実装内容
2 コーディングテクニックの使いどころ
3 実装難易度・必要なスキル
4 transform:scale()を使用してスライダー（slick）をズームアウトしながら切り替える方法の動画
5 CSS,JavaScriptの記述内容
6 実装のポイント

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

今回はWeb制作におけるjQueryのプラグインを使用したスライダー（slick）に関する内容です。要素を拡大・縮小表示させるtransform:scale() を使用して、スライダーをズームアウトしながら切り替えるテクニックをご紹介します。slickを問題なく設置できるスキルがあればコピペで実装できます。

jQueryスライダープラグイン : 「slick」を使用

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

通常のスライダーに比べて一つ一つのスライドを目立たせることができるので、トップページの一番最初に表示される「ヒーローエリア」などに配置すると効果的です。

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

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

実装所要時間は10分程度

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

>> View Demo(English Page)

>> ズームインさせる場合はこちら

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

transform:scale()を使用してスライダー（slick）をズームアウトしながら切り替える方法の動画

CSS,JavaScriptの記述内容

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

$(function(){
  $('.slider').slick({
    fade: true,
    arrows: false,
    autoplay:true,
    autoplaySpeed:1500,
    pauseOnFocus: false,
    pauseOnHover: false
  });
});

.slider img {
  transform-origin: center top;
  transform: scale(1.1);
  transition: 5s ease-out;
}
.slider .slick-active img {
  transform: scale(1.0);
}

実装のポイント

1. スライダーはjQueryのプラグインである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)を指定することで画像が拡大→縮小されズームアウトの動きとなる。

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

>> View Demo(English Page)

>> ズームインさせる場合はこちら