<div class="wrapper">
	<p class="text-2xl text-center">スクロールしてね<br>↓↓↓↓↓↓↓</p>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<div class="sample-box flex justify-center items-center w-80 h-40 mx-auto py-4 text-2xl font-bold text-center text-white duration-500 text1">背景色が変わる</div>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<div class="sample-box flex justify-center items-center w-80 h-40 mx-auto py-4 text-2xl font-bold text-center text-white duration-500 text1">背景色が変わる</div>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<div class="sample-box flex justify-center items-center w-80 h-40 mx-auto py-4 text-2xl font-bold text-center text-white duration-500 text1">背景色が変わる</div>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
</div>

.wrapper {
	width: 100%;
	height: 100vh;
	padding: 48px 0;
	background-color: #ececec;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	overflow-x: hidden;
}

.sample-box{
  background-color: #003e92;
  
  &.is-active{
    background-color:#f11717;
  }
}

const change_bgColor_animation = () => {
	const boxes = document.querySelectorAll(".sample-box");

	const options = {
		root: document.querySelector(".wrapper"),
		rootMargin: "-20% 0px",
		threshold: 0
	};

	const observer = new IntersectionObserver(callback, options);

	boxes.forEach((box) => {
		observer.observe(box);
	});

	// 要素が表示されたら実行する動作
	function callback(entries) {
		entries.forEach((entry) => {
			if (entry.isIntersecting) {
				entry.target.classList.add("is-active");
        // ターゲット要素の監視を停止
        observer.unobserve(entry.target);
			}
		});
	}
};

change_bgColor_animation();