【JS&CSS】画像をズームイン＆ふわっと切り替える方法

本記事では、以下のように画像がズームインしつつ、一定時間で別の画像に切り替わっていく実装方法をご紹介しています。

HTML / CSS / JavaScript コード

<div class="container">
    <img src="image-1.jpg" class="active">
    <img src="image-2.jpg">
    <img src="image-3.jpg">
</div>

.container {
  position: relative;
  width: 800px;
  height: 450px;
  overflow: hidden;
  margin: 0 auto;
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.container img.active {
  animation: 5s zoomFadeIn forwards;
}

/* 画像がフェードイン＆ズームインし、フェードアウトするアニメーション */
@keyframes zoomFadeIn {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

const images = document.querySelectorAll('.container img');
let nextIndex = 1;

function imgAppear() {
  if (nextIndex >= images.length) {
    nextIndex = 0;
  }

  images.forEach(image => {
    image.classList.remove('active');    
  });

  images[nextIndex].classList.add('active');
  nextIndex++;
}

setInterval(imgAppear, 5000);

実装のポイント

本実装ではCSSでアニメーションを設定し、JavaScriptで画像の切り替えを設定しています。
なお、テキストなどの要素をフワッと表示させて切り替えていく実装（ズームインなし）については別記事で紹介しています。

あわせて読みたい

【JS&CSS】一定時間毎に表示がフワッと変わる JavaScript のsetInterval()関数とCSSの@keyframesを組み合わせ、一定時間毎に表示がフワッと変わる実装方法を紹介します。 なお、フワッとではなく瞬時に切り替えるだ…

HTML構造

HTMLはシンプルで、「container」クラスを付与した<div>要素内に複数の<img>タグ（画像）を配置しています。各画像は後述のJavaScriptでスライドショーのように切り替わり、最初に表示する画像（image-1.jpg）にはactiveクラスを付与します。

<div class="container">
  <img src="image-1.jpg" class="active">
  <img src="image-2.jpg">
  <img src="image-3.jpg">
</div>

なお、<img>タグにposition: absolute;を適用しているため、画像が重ねて配置されるようになっています。（画像1枚が表示されているように見える）

CSSでのアニメーション設定

まずcontainerクラスで画像のサイズを指定し、overflow: hidden;を設定することで画像ズーム時にはみ出た部分を非表示にします。imgタグにはデフォルトでopacity: 0;を設定しており、最初は画像が非表示になります。activeクラスが付与されると、以下の@keyframesで定義されたアニメーションが5秒かけて実行され、画像がズームインしながらフェードインしていきます。

.container img.active {
  animation: 5s zoomFadeIn forwards;
}

@keyframes zoomFadeIn {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

• opacity: 0から始まり、50%の時点でopacity: 1になることで、画像がふわっと現れます。
• 同時にtransform: scale(1)からtransform: scale(1.2)にすることで画像を1.2倍にまで拡大し、ズームインの効果を与えています。
• 最後に再びopacity: 0に戻り、次の画像へスムーズに切り替わるよう設定しています。

アニメーションの速度やズームインの倍率などは、好みに合わせて調整してください。

あわせて読みたい

【JS&CSS】クリック（タップ）で画像を拡大させる transform: scale;を使って、画像や図形を拡大表示させる方法を紹介します。自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！…

JavaScriptでの画像切り替え

setInterval関数を使うと、決められた時間ごとに特定の関数を呼び出して繰り返し実行することができます。本実装では5秒ごとにimgAppear関数を呼び出し、activeクラスの除去と付与を繰り返し行うことで画像の切り替えを行っています。

const images = document.querySelectorAll('.container img');
let nextIndex = 1;

function imgAppear() {
  if (nextIndex >= images.length) {
    nextIndex = 0;
  }

  images.forEach(image => {
    image.classList.remove('active');
  });

  images[nextIndex].classList.add('active');
  nextIndex++;
}

setInterval(imgAppear, 5000);

• 最初にすべてのimg要素を取得し、画像を配列のように扱います。
• nextIndexは次に表示する画像のインデックスを追跡しており、全ての画像を順番にループさせるため、最後の画像が表示された後は最初に戻るように設定されています。
• forEachループで全ての画像からactiveクラスを削除し、次に表示したい画像にだけactiveクラスを付与します。

最後に

今回の方法では、CSSだけでなくJavaScriptも使うことで、画像がふわっと現れ、ズームインして自然に切り替わるスライドショーを実装できました。アニメーションのスピードや画像のズーム率などは状況に合わせて自由に調整でき、CSSのkeyframesやJavaScriptのsetInterval関数の基本的な使い方を学べる良い機会でもあるので、ぜひ実際にコードを試してみてください。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

あわせて読みたい

Webデザイン・UIコンポーネント集（HTML/CSS/JS） Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例を纏めました。（随時更新中）実装方法などは別記事にコードや実装ポイントを公開していますので、自…