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

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

今回はWeb制作でjQueryのプラグインを使用したスライダー（slick）の実装に関する内容です。transform:scale()を使用してスライダー（slick）をズームインしながら切り替えるテクニックをご紹介します。
jQueryスライダープラグイン : 「slick」を使用

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

スライドを1枚だけ表示する時に切り替える直前まで動きをつけられるので目立たせることができます。スマホのメインビジュアルにスライダーを実装する時に効果的です。

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

>> View Demo(English Page)

>> ズームアウトさせる場合はこちら

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

CSS,JavaScriptの記述内容

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

$(function(){
  var $window = $(window);
  var $body = $('body');
  $('.slider').slick({
    fade: true,
    arrows: false,
    autoplay:true,
    autoplaySpeed:1500,
    pauseOnFocus: false,
    pauseOnHover: false
  });
    var $container = $(".slider");
    var $slider = $(".slider");
    var $slide = $(".slider li");
    function Resize(){
    var winW = $window.width();
    var winH = $window.height();
      $container.width(winW);
      $container.height(winH);
      $slide.width(winW);
      $slide.height(winH);
      $slider.width(winW);
      $slider.height(winH);
    }
    $window.on("resize",Resize);
    Resize();
});

.slider li .img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  transform-origin: center top;
  transform: scale(1);
  transition: 4s transform ease-out;
}

.slider li.s-01 .img { background-image: url("/img/a.jpg"); }
.slider li.s-02 .img { background-image: url("/img/b.jpg"); }
.slider li.s-03 .img { background-image: url("/img/c.jpg"); }

.slider li.slick-active .img {
  transform: scale(1.03);
}

実装のポイント

• 1. スライダーはslickを使用
• 2. スライダーの各画像は背景画像に指定。scale(1);で等倍にしておく。
  背景画像を指定したタグにtransitionとtransformもして動きをつける。
• 3. slickを使用すると表示画像を囲むタグに対して.slick-activeが自動的に付与される（今回のデモページではliタグに付与）
  liタグに.slick-activeが付与された時のimgタグにscale(1.03)を指定することでズームインしながら画像を切り替えることができる。
• 4. jQueryの.width()と.height()を使用してウィンドウサイズ全体にスライダーを表示するよう指定

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

>> View Demo(English Page)

>> ズームアウトさせる場合はこちら

PR

ChatGPT 120%活用術 [ ChatGPTビジネス研究会 ] 価格：1,390円（税込、送料無料) (2023/5/23時点) 楽天で購入

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。