【プログラミング勉強】HTML/CSS/JavaScriptで画面内に入った要素をランダムな順番、ランダムな色で出現させるソースコードを紹介！

<div class="flex-container">
	<div class="flex-item"></div>
	<div class="flex-item"></div>
	<div class="flex-item"></div>
	<div class="flex-item"></div>
	<div class="flex-item"></div>
	<div class="flex-item"></div>
	<div class="flex-item"></div>
	<div class="flex-item"></div>
	<div class="flex-item"></div>
	<div class="flex-item"></div>
	<div class="flex-item"></div>
	<div class="flex-item"></div>
	<div class="flex-item"></div>
	<div class="flex-item"></div>
	<div class="flex-item"></div>
</div>

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.flex-item {
    padding-top: calc(20% - 8px);
    width: calc(20% - 8px);
    opacity: 0;
    transition: all 0.5s;
}

document.addEventListener('DOMContentLoaded', () => {
    // 全ての「.flex-item」を取得し「items」という変数に格納
    const items = document.querySelectorAll('.flex-item');
    // checkVisibilityという関数を定義
    const checkVisibility = () => {
        // それぞれの「.flex-item」に対して
        items.forEach(item => {
            // それぞれの「.flex-item」が画面内にあり、まだアニメーションが適用されていない（.flex-itemに.animatedというクラスがない）場合
            if (item.getBoundingClientRect().top < window.innerHeight && !item.classList.contains('animated')) {
                // それぞれの「.flex-item」にランダムな背景色を指定
                item.style.backgroundColor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
                
                // ランダムな時間差でそれぞれの「.flex-item」を表示していく
                setTimeout(() => {
                    item.style.opacity = 1;
                }, Math.random() * 1000);
                // 「.animated」クラスを付与し、再びアニメーションが発生しないようにする
                item.classList.add('animated'); 
            }
        });
    };

    // スクロールイベントとロードイベントそれぞれで関数を発動する
    window.addEventListener('scroll', checkVisibility);
    window.addEventListener('load', checkVisibility);
});