背景の画像を複数用意し、順番にフェドアウト、フェードインさせてみました。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Fade Background Image</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
background:
url('pic/pic_01.jpg') no-repeat center center/cover;
/* 実行直後に画面に表示される画像の配列を定義 */
transition: background-image 4s ease; /* ※ */
/* 画像の切り替え時間 */
}
.fade-out {
opacity: 0;
}
.fade-in {
opacity: 1;
}
</style>
</head>
<body>
<script>
// 画像の配列を定義
// 表示の順番は以下の通り
// pic_01,pic_02,pic_03,pic_04,pic_02,pic_03,pic_04・・・
const images =
['pic/pic_02.jpg', 'pic/pic_03.jpg', 'pic/pic_04.jpg'];
let currentIndex = 0;
// 画像を切り替える関数
function changeBackgroundImage() {
document.body.classList.add('fade-out');
setTimeout(() => {
document.body.style.backgroundImage =
`url('${images[currentIndex]}')`;
document.body.classList.remove('fade-out');
document.body.classList.add('fade-in');
// currentIndex が images.length に達した場合
// currentIndex は0に戻り、
// 配列の末尾に達した場合に最初の要素に戻る。
currentIndex = (currentIndex + 1) % images.length;
}, 2000); // ※
// 最初の画像のフェードアウトの時間
}
changeBackgroundImage();
// 一定時間ごとに2枚目以降の画像を切り替える
setInterval(changeBackgroundImage, 8000); // ※
// 画像の切り替え間隔
</script>
</body>
</html>
<!-- index.html -->
3箇所の※印で設定した時間の関係（バランス）が意外と面倒でした。
