JavaScript

slick.jsを使って画像を徐々に拡大させながら切替表示する方法【jQuery】

  /

画像スライドショーは、Webサイトをより魅力的に見せるための強力なツールです。その中でも人気の高い「slick.js」を活用して、単なる画像切り替えではなく、画像が徐々に拡大しながら切り替わる演出を加える方法をご紹介します。

過去に「slick.jsを使った複数画像スライダープラグイン」を取り上げましたが、今回はさらに一歩進めたアプローチを実現します。slick.jsの基本的な使い方に加え、画像の拡大効果をCSSアニメーションで実装する具体的な方法を解説していきます。

Contents

このガイドの目的

  • slick.jsの基本的な使い方を初心者でも理解できるように解説
  • CSSアニメーションを活用した拡大効果の具体例を提供
  • HTML、CSS、JavaScriptを使ったコーディング例をステップごとに説明

これを読めば、Webサイトに動きのある画像スライドショーを簡単に導入できるようになります！

slick.jsを使った拡大アニメーションの実装概要

まず、どのような仕組みで実現するのかを簡単に説明します。以下の3つの要素を組み合わせることで、画像が拡大しながら切り替わる効果を作り出します。

  1. HTML：画像をスライドショー形式で配置
  2. CSS：アニメーション効果を設定
  3. JavaScript：slick.jsを使ってスライドショーを制御

これらを順に解説していきますので、一緒に進めていきましょう！

ステップ1: HTMLの準備

まずは、スライドショーを構成するHTMLを記述します。
以下のコードは、スライドエリア（class=”slider”）内に拡大させながら切替表示する画像（1～3.jpg）を用意し、それぞれをslick.jsのスライダーで表示する例です。

<h1>slick.jsを使って画像を徐々に拡大させながら切替表示</h1>

<div class="slider">
  <div class="slick-img">
    <img src="1.jpg">
  </div>
  <div class="slick-img">
    <img src="2.jpg">
  </div>
  <div class="slick-img">
    <img src="3.jpg">
  </div>
</div>

ステップ2: CSSで拡大アニメーションを設定

次に、画像が拡大するアニメーションをCSSで定義します。
以下のコードを参考に、@keyframesを使ってスムーズな拡大効果を作成してください。
slick.cssファイルを読み込みます。スライドエリア（.slider）のwidth・heightを指定し、スライドエリアからはみ出しても見えない様（overflow: hidden）にします。@keyframesと.animationで徐々に拡大表示させてます。

<style>
body {
  margin: 20px 10px;
  padding: 0;
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 2em;
  padding-bottom: 20px;
}
.slider {
  width: 800px;
  height: 533px;
  overflow: hidden;
  margin: 0 auto;
}
.slick-img img {
  width: 100%;
}
@keyframes fdzm {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.animation {
  animation: fdzm 4s 0s forwards;
}
</style>

ステップ3: JavaScriptでslick.jsをセットアップ

最後に、JavaScriptでslick.jsを使用し、スライドショーを制御します。
以下のコードを使えば、スライドが切り替わるたびにアニメーション効果が適用されるようになります。

jquery-2.1.4.min.js、slick.jsファイルを読み込みます。
「$(‘スライドエリア’).on(‘init’, function(event, slick) {スライド開始前の処理、スライド対象エリアのclassに.animationを追加}).slick({オプション})」
を記述してます。スライド開始前の処理として画像を徐々に拡大させながら切替表示する処理箇所は以下のコメントに記述してます。オプションではスライド切替演出、速度、自動切替 等を設定します。

<script src="jquery-2.1.4.min.js"></script>
<script src="slick.js"></script>
<script>
$(function () {
    $('.slider').on('init', function(event, slick) {  //スライド開始前の処理
      $('.slick-slide[data-slick-index="0"]').addClass("animation");  //スライド対象エリアのclassに.animationを追加
    })
    .slick({  //スライドオプションを設定
    fade:true,
    dots: false,
    infinite: true,
    speed: 1000,
    slidesToShow: 1,
    adaptiveHeight: false,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 4000,
    pauseOnFocus: false,
    pauseOnHover: false
    })
    .on({  //スライド中の処理
      beforeChange: function (event, slick, currentSlide, nextSlide) {  //1スライド前の処理
        $(".slick-slide", this).eq(nextSlide).addClass("animation");  //スライド対象エリアの次のスライドエリアのclassに.animationを追加
        $(".slick-slide", this).eq(currentSlide).addClass("rm-animation");  //現在のスライド対象エリアのclassに.rm-animationを追加
      },
      afterChange: function () {
        $(".rm-animation", this).removeClass( //1スライド後の処理
        "rm-animation animation"  //スライドが終わった対象エリアのclassから.rm-animation .animationを削除し、CSSアニメーションを削除（リセット）
        );
      },
    });
});
</script>

slick.jsを使って画像を徐々に拡大させながら切替表示するデモページ

実際に動作を確認できるデモページを用意しました。以下のリンクからアクセスして、slick.jsの拡大アニメーション効果をご体験ください。

slick.jsを使って画像を徐々に拡大させながら切替表示するデモページ

まとめ

今回のガイドでは、slick.jsを使って画像を拡大しながら切り替える方法をご紹介しました。
HTML、CSS、JavaScriptの組み合わせで、簡単にWebサイトの魅力を向上させるスライドショーが作れます。ぜひあなたのプロジェクトにも取り入れてみてください！

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

slick.js 拡大表示
関連記事