document.addEventListener(
	'DOMContentLoaded',
	() => {

		//監視したい複数要素
		const targets = document.querySelectorAll("[class*='epb-animation-']");

		const callback = (entries, observer) => {
			entries.forEach((entry) => {
				//isIntersectingプロパティは交差しているかどうかのbool値
				//viewportに交差し、入ったときにisIntersecting===true、出たときにfalse
				if (entry.isIntersecting) {
					entry.target.classList.add("is-epb-active");
					observer.unobserve(entry.target);
				}
				entry.target.addEventListener(
					'animationend',
					() => {
						entry.target.classList.remove("is-epb-active");
						entry.target.classList.add("is-epb-animationend");
					},
					false
				);
			});
		};

		//Intersection observer のオプションを作成
		const options = {
			root: null,
			rootMargin: '-25% 0px',
			thureshold: [0, 0.25, 0.5, 0.75, 1],
		};
		//Intersection observer を作成
		//ターゲットが IntersectionObserver に指定された閾値を満たす度にコールバックが呼び出される
		const io = new IntersectionObserver(callback, options);
		targets.forEach((target) => {
			//監視したい対象をobserve
			io.observe(target);
		});
		false
	});