html css javascriptで、画面が特定の位置までスクロールしたらタグ内の文字が1文字ずつアニメーションするコード

Yamato Nagata

html

<!DOCTYPE html>
<html>
<head>
	<title>Scroll Animation</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<h1 class="text">Hello World!</h1>
	</div>

	<script src="script.js"></script>
</body>
</html>

css

.container {
	height: 200vh; /* スクロールする高さを指定 */
	font-size: 5em; /* フォントサイズを指定 */
	display: flex;
	align-items: center;
	justify-content: center;
}

.text {
	opacity: 0; /* 最初は非表示にする */
	transition: opacity 1s ease-in-out;
}

.text.show {
	opacity: 1; /* スクロールされたら表示する */
}

js

window.addEventListener('scroll', () => {
	const text = document.querySelector('.text');
	const triggerPosition = 500; // アニメーションを開始する位置を指定
	const scrollPosition = window.scrollY;
	const windowHeight = window.innerHeight;
	if (scrollPosition > triggerPosition - windowHeight) {
		const textContent = text.textContent;
		const textLength = textContent.length;
		let counter = 0;
		setInterval(() => {
			if (counter === textLength) {
				clearInterval();
			} else {
				counter++;
				text.innerHTML = textContent.substring(0, counter);
			}
		}, 200);
		text.classList.add('show');
	}
});

まず、windowオブジェクトのaddEventListenerメソッドを使って、スクロールイベントを監視しています。この関数は、画面がスクロールされた際に実行されます。

次に、querySelectorメソッドを使って、クラスがtextである要素を取得しています。この要素は、アニメーションさせたいテキストが含まれている要素です。

triggerPositionは、アニメーションを開始する位置を指定しています。この値は500pxと設定されています。

scrollPositionは、現在のスクロール位置を取得しています。

windowHeightは、ブラウザの表示領域の高さを取得しています。

if文で、スクロール位置がtriggerPositionからwindowHeightを引いた値よりも大きい場合、アニメーションを開始するようにしています。この条件式で、スクロール位置が指定した位置に達したかどうかを判定しています。

アニメーションは、setIntervalメソッドを使って実装されています。setIntervalメソッドは、一定時間ごとに指定された関数を繰り返し実行するタイマーを設定します。このコードでは、200ミリ秒ごとに1文字ずつ表示されるようにしています。

textContentプロパティを使って、アニメーションさせるテキストを取得し、その文字列の長さをtextLength変数に格納しています。

counter変数を初期化し、setIntervalメソッドのコールバック関数で、counter変数をインクリメントしながら、textContentの文字列を1文字ずつ表示する処理を行っています。

最後に、classListプロパティのaddメソッドを使って、クラス名showを追加して、要素を表示します。

以上が、このJavaScriptコードの解説になります。

この記事が気に入ったらサポートをしてみませんか？