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

TOP > jQuery > 【jQuery】scaleでスライダー(slick)をズームアウトしながら切り替えるテクニック/Slick Zoom Out Effect

【jQuery】scaleでスライダー(slick)をズームアウトしながら切り替えるテクニック/Slick Zoom Out Effect

スポンサーリンク

実装内容

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

実装所要時間:15分程度

実装方法

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

$('.slider').slick({
  fade: true,
  arrows: false,
  autoplay:true,
  autoplaySpeed:1500
});
.slider img {
  transform-origin: center top;
  transform: scale(1.1);
  transition: 4s transform ease-out;
}
.slider .slick-active img {
  transform: scale(1.0);
}

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

スポンサーリンク

コメントを残す

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