<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>
	<p class="moveText w-full mx-auto py-4 text-6xl font-bold text-center text-white duration-300 text1">スクロールで</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>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<p class="moveText w-full mx-auto py-4 text-6xl font-bold text-center text-white duration-300 text2">アニメーションが</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>
	<p class="moveText w-full mx-auto py-4 text-6xl font-bold text-center text-white duration-300 text3">実装できる！！！</p>
	<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;
}

.text1,
.text3 {
	background-color: #003e92;
	transform: translateX(-100%);

	&.is-active {
		transform: translateX(0);
	}
}

.text2 {
	background-color: #003e92;
	transform: translateX(100%);

	&.is-active {
		transform: translateX(0);
	}
}

const move_text_animation = () => {
	const moveText = document.querySelectorAll(".moveText");

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

	const observer = new IntersectionObserver(callback, options);

	moveText.forEach((text) => {
		observer.observe(text);
	});

	// 要素が表示されたら実行する動作
	function callback(entries) {
		entries.forEach((entry) => {
			if (entry.isIntersecting) {
				entry.target.classList.add("is-active");
			}
		});
	}
};

move_text_animation();