html css javascriptで、画面が特定の位置までスクロールしたらタグ内の文字が1文字ずつアニメーションするコード
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コードの解説になります。
いいなと思ったら応援しよう！
