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

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

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

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

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

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

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

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

実装所要時間は10分程度

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()を使用してウィンドウサイズ全体にスライダーを表示するよう指定

この記事を書いた人(著者情報)

片岡 学

カタチップ編集長。昭和生まれの30代でWeb業界歴は15年。プログラマー出身のWebデザイナー。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのディレクター兼コーダーを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク

「【jQuery】transform:scale()を使用してスライダー(slick)をズームインしながら切り替える方法」への2件のフィードバック

コメントは受け付けていません。