JavaScriptで画像切り替えアニメーションを実装する方法

javascript 画像切り替えアニメーション

この記事では、JavaScriptを使って画像をスムーズに切り替えるアニメーションを実装する方法を解説します。setTimeout関数を使ったシンプルな実装から、 setInterval関数やCSSアニメーションとの組み合わせ、そして使い勝手を向上させるためのJavaScriptライブラリの活用まで、具体的なコード例を交えながら詳しく説明します。

画像切り替えアニメーションの基本

setTimeout関数を使った実装

setTimeout関数を使って一定時間ごとに画像を切り替える方法を解説します。画像の配列を作成し、インデックスを使って順番に表示する方法をコード例とともに紹介します。アニメーションの速度を調整する方法についても解説します。


<img id="fadeImg" src="image1.jpg" alt="画像1">
<script>
  const images = ["image1.jpg", "image2.jpg", "image3.jpg"];
  let currentIndex = 0;
  const fadeImg = document.getElementById("fadeImg");

  function changeImage() {
    currentIndex = (currentIndex + 1) % images.length;
    fadeImg.src = images[currentIndex];
    setTimeout(changeImage, 3000); // 3秒ごとに画像を切り替え
  }

  changeImage(); 
</script>

setInterval関数を使った実装

setTimeout関数ではなく、setInterval関数を使って一定間隔で画像を切り替える方法を解説します。setInterval関数を使うメリット、デメリットについても触れます。


<img id="rotatingImg" src="image1.jpg" alt="画像1">
<script>
  const images = ["image1.jpg", "image2.jpg", "image3.jpg"];
  let currentIndex = 0;
  const rotatingImg = document.getElementById("rotatingImg");

  setInterval(() => {
    currentIndex = (currentIndex + 1) % images.length;
    rotatingImg.src = images[currentIndex];
  }, 3000); // 3秒ごとに画像を切り替え
</script>

setTimeout関数とsetInterval関数の違いは、setTimeout関数は指定時間後に一度だけ関数を実行するのに対し、setInterval関数は指定時間ごとに繰り返し関数を実行することです。どちらの関数も画像切り替えアニメーションの実装に使用できますが、setInterval関数の方がコードがシンプルになる場合が多いです。

より滑らかな画像切り替えアニメーションを実現する

CSSトランジションとの組み合わせ

CSSの`transition`プロパティを使って、画像の切り替えにアニメーション効果を追加する方法を解説します。フェードイン、フェードアウトなどの効果を実装するコード例を紹介します。


<style>
#fadingImg {
  width: 300px;
  height: 200px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

#fadingImg.fade-out {
  opacity: 0;
}
</style>
<img id="fadingImg" src="image1.jpg" alt="画像1">
<script>
  const images = ["image1.jpg", "image2.jpg", "image3.jpg"];
  let currentIndex = 0;
  const fadingImg = document.getElementById("fadingImg");

  setInterval(() => {
    fadingImg.classList.add("fade-out");
    setTimeout(() => {
      currentIndex = (currentIndex + 1) % images.length;
      fadingImg.src = images[currentIndex];
      fadingImg.classList.remove("fade-out");
    }, 500); // transitionのdurationと同じ時間
  }, 3000);
</script>

CSSアニメーションとの組み合わせ

CSSの`animation`プロパティを使って、より複雑な画像切り替えアニメーションを実装する方法を解説します。keyframesを使ったアニメーションの定義方法、アニメーションの再生時間や繰り返し回数の設定方法について説明します。


<style>
#animatedImg {
  width: 300px;
  height: 200px;
  animation: slide 3s linear infinite;
}

@keyframes slide {
  0% { transform: translateX(0); }
  33.33% { transform: translateX(-100%); }
  66.66% { transform: translateX(-200%); }
  100% { transform: translateX(0); }
}
</style>
<div>
  <img id="animatedImg" src="image1.jpg" alt="画像1">
  <img id="animatedImg" src="image2.jpg" alt="画像2">
  <img id="animatedImg" src="image3.jpg" alt="画像3">
</div>

JavaScriptライブラリを活用する

Swiper.js

Swiper.jsを使って、画像スライダーやカルーセルを実装する方法を解説します。Swiper.jsのインストール方法、基本的な使い方、オプション設定について説明します。

Swiper.jsは、モバイルファーストなスライダー/カルーセルを実現するためのJavaScriptライブラリです。使いやすく、高機能であるため、多くのWebサイトで採用されています。

項目	説明
インストール方法	npm、yarnなどのパッケージマネージャー、またはCDN経由でインストールできます。
基本的な使い方	HTMLでスライダーの構造を作成し、JavaScriptでSwiperのインスタンスを生成します。
オプション設定	自動再生、ページネーション、ナビゲーション矢印など、様々なオプションを設定できます。

Swiper.jsの公式ウェブサイト:https://swiperjs.com/

Glide.js

Glide.jsを使って、軽量かつシンプルな画像スライダーを実装する方法を解説します。Glide.jsのインストール方法、基本的な使い方、カスタマイズ方法について説明します。

Glide.jsは、軽量でシンプルなJavaScriptライブラリです。Swiper.jsと比較して機能は少ないですが、その分軽量で高速に動作するのが特徴です。

項目	説明
インストール方法	npm、yarnなどのパッケージマネージャー、またはCDN経由でインストールできます。
基本的な使い方	HTMLでスライダーの構造を作成し、JavaScriptでGlideのインスタンスを生成します。
カスタマイズ方法	自動再生、ページネーション、ナビゲーション矢印などをカスタマイズできます。

Glide.jsの公式ウェブサイト:https://glidejs.com/

まとめ

この記事では、JavaScriptを使って画像切り替えアニメーションを実装する方法を、基本的な実装から応用、そしてライブラリの活用まで幅広く解説しました。紹介した方法を参考に、Webサイトに魅力的な画像切り替えアニメーションを追加してみてください。

JavaScriptで画像切り替えアニメーションを実装する方法

画像切り替えアニメーションの基本

setTimeout関数を使った実装

setInterval関数を使った実装

より滑らかな画像切り替えアニメーションを実現する

CSSトランジションとの組み合わせ

CSSアニメーションとの組み合わせ

JavaScriptライブラリを活用する

Swiper.js

Glide.js

まとめ

関連QA

Q1: JavaScriptで画像切り替えアニメーションを実装する際に、画像のフェードイン・フェードアウト効果を追加するにはどうすればよいですか？

Q2: JavaScriptライブラリを使うメリットは何ですか？

Q3: Swiper.jsとGlide.jsのどちらのライブラリを選べばよいですか？