JavaScriptで複数セクションの背景色をランダムに変えるアニメーションの作り方

前回の記事に引き続き、JavaScriptを使用して複数のセクションにランダムな背景色を適用する方法を紹介します。

各コードの説明
まとめ

各コードの説明

See the Pen Background_Random_Color_2 by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

HTML

<div class="section">
  <p>セクション1です</p>
</div>
<div class="section gradation">
  <p>セクション2です</p>
</div>
<div class="section">
  <p>セクション3です</p>
</div>

「.gradation」が追加されているセクションは、特別なスタイルを適用するための指定です。この例では、背景色が定期的に変化する JavaScript の処理の対象として利用されます。

CSS

.section {
  width: 100%;
  height: 50vh;
  margin: 20px auto;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2); /* セクションのデフォルトの背景色 */
  transition: background-color 0.5s ease; /* 背景色の変化を滑らかにする */
}

JavaScript

// ページロード時に最初の背景色変更を行う関数
window.onload = function() {
  const sectionElements = document.querySelectorAll('.gradation');
  sectionElements.forEach((section) => {
    changeBackgroundColor(section); // 初期の背景色変更を実行
    setInterval(() => {
      changeBackgroundColor(section); // 定期的な背景色変更を設定
    }, 2000); // 2000msごとに背景色を変更
  });
};

// ランダムな色を生成する関数
function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

// 背景色を変更する関数（滑らかに変化させる）
function changeBackgroundColor(element) {
  const newColor = getRandomColor(); // 新しいランダムな色を生成
  element.style.backgroundColor = newColor; // 背景色を設定
}

背景色の変更などが記載されてます。

アニメーション対象のクラス名

const sectionElements = document.querySelectorAll('.gradation');

このスクリプトでは、.gradation クラスが付与されたセクションがアニメーションされます。
つまり、以下のようにHTMLで定義されたセクションがアニメーションの対象となります

変色の時間などの編集方法

    // 定期的に背景色を変更する処理を設定
    setInterval(() => {
      changeBackgroundColor(section);
    }, 2000); // ここで時間を変更 (例: 3000 にすると3秒ごとに変わる)

アニメーションの間隔（変色の時間間隔）は、JavaScriptの setInterval 関数内で指定しています。

上記の例では、setInterval の第二引数に 2000 という数値があります。これはミリ秒単位で、現在は2秒ごとに背景色が変わるように設定されています。この数値を変更することで、変色の時間間隔を調整することができます。

例えば、 3000 に変更すると3秒ごとに変わるようになります。

まとめ

今回は前回に引き続きJavaScriptを使って背景色を変更する方法を紹介させていただきました。
前回と違うところは、一部のクラス名があるセクションのみ背景色がランダムでアニメーションするようになっておりますので、目立たせたい箇所のみこちらのコードを利用すればよりユーザーの目を引くことも出来るかと思いますので、興味がある方は是非お試しください。

サイト全体の背景色の変更アニメーションをご希望の方は前回紹介した記事を御覧ください！