JavaScriptで簡単！IntersectionObserverを使った動的アニメーション作成ガイド

<h1>下にスクロールしてみてね</h1>
<section class="cards">
	<div class="card target">Card 1</div>
	<div class="card target">Card 2</div>
	<div class="card target">Card 3</div>
	<div class="card target">Card 4</div>
	<div class="card target">Card 5</div>
</section>

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.card {
	background-color: rgb(255, 222, 224);
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	padding: 20px;
	text-align: center;
	font-size: 1.2rem;

    /* イベントが発火する前は非表示 */
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.5s ease;
}

/* イベントが発生し、アニメーションが適用された時表示 */
.card.visible {
	opacity: 1;
	transform: translateY(0);
}

// IntersectionObserver コールバック関数
const observerCallback = (entries, observer) => {
	entries.forEach(entry => {
		if (entry.isIntersecting) {
			entry.target.classList.add('visible'); // 可視領域に入ったらクラスを追加
		} else {
			entry.target.classList.remove('visible'); // 可視領域から外れたらクラスを削除
		}
	});
};

// IntersectionObserver のオプション設定
const observerOptions = {
	root: null, // ビューポートを基準
	threshold: 0.2 // 20%が見えたら発火
};

// Observer を作成
const observer = new IntersectionObserver(observerCallback, observerOptions);

// 監視対象の要素を登録
document.querySelectorAll('.target').forEach(target => observer.observe(target));

// IntersectionObserver コールバック関数
const observerCallback = (entries, observer) => {
	entries.forEach(entry => {
		if (entry.isIntersecting) {
			entry.target.classList.add('visible'); // 可視領域に入ったらクラスを追加
		} else {
			entry.target.classList.remove('visible'); // 可視領域から外れたらクラスを削除
		}
	});
};

// IntersectionObserver のオプション設定
const observerOptions = {
	root: null, // ビューポートを基準
	threshold: 0.2 // 20%が見えたら発火
};

// Observer を作成
const observer = new IntersectionObserver(observerCallback, observerOptions);

// 「.target」クラスが付いている、監視対象の要素を全て登録
document.querySelectorAll('.target').forEach(

// 各要素を IntersectionObserver に登録し、監視を開始。
target => observer.observe(target)

);

.card {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.5s ease;
}

.card.visible {
	opacity: 1;
	transform: translateY(0);
}

// IntersectionObserver のオプション設定
const observerOptions = {
	root: null,
	threshold: 0.8 // 80%が見えたら発火
};

// Observer を作成
const observer = new IntersectionObserver(observerCallback, observerOptions);

// IntersectionObserver コールバック関数
const observerCallback = (entries, observer) => {
	entries.forEach(entry => {
		if (entry.isIntersecting) {
			entry.target.classList.add('visible'); // 可視領域に入ったらクラスを追加
			observer.unobserve(entry.target); // 一度だけ発火させるため監視解除
		}
	});
};

/* アニメーション設定 */
@keyframes fancyFadeIn {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.8) rotate(-10deg); /* 初期状態 */
    }
    50% {
        opacity: 0.5;
        transform: translateY(20px) scale(1.1) rotate(5deg); /* 少し拡大＋回転 */
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg); /* 最終状態 */
    }
}

/* 可視状態になったらアニメーションを適用 */
.card.visible {
    animation: fancyFadeIn 0.8s ease forwards; /* アニメーション再生 */
    background-color: rgb(218, 255, 224); /* 背景色を変更 */
}

<section class="cards">
    <div class="card target" data-animation="fade-up">Card 1</div>
    <div class="card target" data-animation="fade-left">Card 2</div>
    <div class="card target" data-animation="fade-right">Card 3</div>
    <div class="card target" data-animation="fade-up">Card 4</div>
    <div class="card target" data-animation="fade-left">Card 5</div>
</section>

/* 初期状態 */
.card {
    opacity: 0;
    transform: translateY(20px); /* デフォルトは下からの動き */
    transition: background-color 0.5s ease;
}

/* 上からフェードイン */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 左からフェードイン */
@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 右からフェードイン */
@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* アニメーションの適用 */
.card.fade-up {
    animation: fadeUp 0.8s ease forwards;
}

.card.fade-left {
    animation: fadeLeft 0.8s ease forwards;
}

.card.fade-right {
    animation: fadeRight 0.8s ease forwards;
}

// IntersectionObserver コールバック関数
const observerCallback = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const animationType = entry.target.dataset.animation; // data-animation の値を取得
            entry.target.classList.add(animationType); // 対応するクラスを追加
            observer.unobserve(entry.target); // 一度だけ実行する場合
        }
    });
};

<div id="content-container">
	<div class="content-item">
		<h2>コンテンツアイテム 1</h2>
		<p>これは初期のコンテンツです。</p>
	</div>
	<div class="content-item">
		<h2>コンテンツアイテム 2</h2>
		<p>スクロールして新しいコンテンツを読み込んでください。</p>
	</div>
	<div class="content-item">
		<h2>コンテンツアイテム 3</h2>
		<p>さらに下へスクロールしてください。</p>
	</div>
</div>
<div id="loading" class="loading">読み込み中...</div>

document.addEventListener('DOMContentLoaded', () => {
	const contentContainer = document.getElementById('content-container');
	const loadingIndicator = document.getElementById('loading');

	let contentIndex = 4; // コンテンツアイテムの番号を管理

	// 新しいコンテンツアイテムを追加する関数
	const loadMoreContent = () => {
		for (let i = 0; i < 3; i++) {
			const newItem = document.createElement('div');
			newItem.classList.add('content-item');

			const newHeading = document.createElement('h2');
			newHeading.textContent = `コンテンツアイテム ${contentIndex}`;
			const newParagraph = document.createElement('p');
			newParagraph.textContent = `これは動的に追加されたコンテンツアイテム ${contentIndex} です。`;

			newItem.appendChild(newHeading);
			newItem.appendChild(newParagraph);
			contentContainer.appendChild(newItem);

			contentIndex++;
		}
	};

	// IntersectionObserverでローディングインジケーターを監視
	const observer = new IntersectionObserver((entries) => {
		const entry = entries[0];
		if (entry.isIntersecting) {
			loadMoreContent(); // 新しいコンテンツを追加
		}
	});

	// ローディングインジケーターを監視
	observer.observe(loadingIndicator);
});