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

TOP > jQuery > 【jQuery】scaleで全画面のスライダー(slick)をズームインしながら切り替えるテクニック/Slick Zoom In Effect

【jQuery】scaleで全画面のスライダー(slick)をズームインしながら切り替えるテクニック/Slick Zoom In Effect

スポンサーリンク

実装内容

scaleでスライダー(slick)をズームインしながら切り替えるテクニックをご紹介します

実装所要時間:15分程度

実装方法

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

$(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);
}

【簡単な解説】
現在作成中

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です