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

2024年9月20日

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

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で画像の切り替えを設定しています。
なお、テキストなどの要素をフワッと表示させて切り替えていく実装（ズームインなし）については別記事で紹介しています。

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に戻り、次の画像へスムーズに切り替わるよう設定しています。

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

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の実装例は、一覧として以下記事に纏めています。