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

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

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

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

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

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

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

使いどころ

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

実装所要時間:15分程度
難易度:初心者コーダーでも実装可能

CSS,JavaScriptの記述内容

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

$(function(){
  var $window = $(window);
  var $body = $('body');
  $('.slider').slick({
    fade: true,
    arrows: false,
    autoplay:true,
    autoplaySpeed:1500
  });
    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()を使用してウィンドウサイズ全体にスライダーを表示するよう指定

スポンサーリンク

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

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