JavaScriptのIntersectionObserver()を利用した動作確認ツール

スクロールして要素が画面内に入ったことを検知し、アニメーション表示させるコードを生成します。移動距離や時間を調整可能です。

プレビュー

初期位置 (Y軸の移動量)

アニメーション時間

HTML

<div id="scroll-container">
	<div class="spacer">Scroll Down ↓</div>
	<div class="animate-box">Box 1</div>
	<div class="spacer">Keep Scrolling</div>
	<div class="animate-box">Box 2</div>
	<div class="spacer">Keep Scrolling</div>
	<div class="animate-box">Box 3</div>
	<div class="spacer">Keep Scrolling</div>
	<div class="animate-box">Box 4</div>
	<div class="spacer">Keep Scrolling</div>
	<div class="animate-box">Box 5</div>
	<div class="spacer">Scroll End</div>
</div>

CSS

#scroll-container {
	width: 30%;
	min-width: 180px;
	height: 300px;
	overflow-y: scroll;
	border: 2px solid #333;
	padding: 20px;
	background: #fff;
	position: relative;
}

.spacer {
	height: 300px; /* スクロールさせるための余白 */
	display: flex;
	align-items: center;
	justify-content: center;
	color: #aaa;
}

.animate-box {
	width: 100%;
	height: 100px;
	background: #2a9271;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 1.5rem;
	border-radius: 8px;
	
	/* 初期状態: 透明＆少し下に配置 */
	opacity: 0;
	transform: translateY({{initial_offset}}px);
	transition: all {{anim_duration}}s ease;
}

/* アクティブ状態: 表示＆元の位置へ */
.animate-box.active {
	opacity: 1;
	transform: translateY(0);
}

JavaScript

// 監視対象の要素を取得
const targets = document.querySelectorAll('.animate-box');

// オプション設定
const options = {
	root: document.querySelector('#scroll-container'), // ビューポートの場合は null
	rootMargin: '0px',
	threshold: 0.5
};

// コールバック関数
const callback = (entries, observer) => {
	entries.forEach(entry => {
		if (entry.isIntersecting) {
			// 画面内に入ったらクラス付与
			entry.target.classList.add('active');
			
			// 一度発火したら監視を停止する場合
			observer.unobserve(entry.target);
		}
	});
};

// 監視を開始
const observer = new IntersectionObserver(callback, options);
targets.forEach(target => {
	observer.observe(target);
});