今回はJavaScriptを使用して定期的に背景色をランダムに変更する方法を紹介します。
少し変わったwebサイトにしたい方向けとなっております。
See the Pen Untitled by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.
HTMLとCSSの準備
まずは、HTMLとCSSを準備しましょう。以下のように、コンテンツを含む<div>要素と、背景色のトランジションを設定するCSSを記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ランダムな背景色を設定するアニメーション</title>
<style>
body {
transition: background-color 1s ease;
}
.content {
width: 80vw;
height: 100vh;
margin: auto;
text-align: center;
background-color: rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
<div class="content">
<p>ここにコンテンツを入れられます</p>
</div>
</body>
</html>JavaScriptで背景色をランダムに変更する
次に、JavaScriptを使用して定期的に背景色をランダムに変更する機能を実装します。
<script>
// ランダムな色を生成する関数
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() {
document.body.style.backgroundColor = getRandomColor();
}
// 一定時間ごとに背景色を変更する
setInterval(changeBackgroundColor, 2000); // 2000msごとに背景色を変更
</script>ランダムな色を生成する関数
まずは、ランダムな色を生成する関数です。この関数では、16進数の色コードをランダムに生成します。
function getRandomColor() {
const letters = '0123456789ABCDEF'; // 色の16進数で使用する文字列
let color = '#'; // 16進数の色コードの始まりを示す記号
// 6回ループしてランダムな16進数の色コードを生成する
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)]; // lettersの中からランダムに1文字選んで追加
}
return color; // 生成したランダムな色コードを返す
}この関数では、lettersという文字列には、色の16進数で使用される文字が含まれています（0から9とAからF）。Math.random()を使って0から15までのランダムな整数を生成し、それをlettersのインデックスとして使っています。これにより、ランダムな色コードが生成されます。
背景色を変更する関数
次に、背景色を変更する関数です。この関数は、先ほど作成したランダムな色コードを使って、document.body.style.backgroundColorを変更します。
function changeBackgroundColor() {
document.body.style.backgroundColor = getRandomColor(); // ランダムな色コードを背景色として設定
}定期的に背景色を変更する処理
最後に、setInterval関数を使って一定の間隔で背景色を変更する処理を実装します。
setInterval(changeBackgroundColor, 2000); // 2000msごとにchangeBackgroundColor関数を実行この行は、changeBackgroundColor関数を2000ミリ秒（2秒）ごとに実行するように設定しています。つまり、背景色が2秒ごとにランダムに変化するアニメーションが実現されます。
まとめ
See the Pen Untitled by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.
いかがでしたか？
今回はJavaScriptを使って、ランダムに背景色を変更して、少し変わったwebサイトにする方法を紹介させていただきました。
ただし、今回のコードはbodyの背景色がアニメーションされるようになってます。
一部のセクションのみ対応させたい場合はコードを改修する必要がありますのでご注意ください。
なお、一部のセクションのみに対応させたい場合は下記の記事で紹介してますので御覧ください！
