プログラミング初心者でも簡単！JavaScriptで作るテキストタイピングアニメーション

<div id="typingText"></div>

#typingText {
    font-size: 24px;
    line-height: 1.5;
}
#typingCursor {
    display: inline-block;
    width: 1px;
    height: 36px;
    margin-left: 10px;
    vertical-align: middle;
    background-color: #333;
    animation: blinkCursor 0.75s steps(5) infinite;
}
@keyframes blinkCursor {
    from {
        background-color: #333;
    }
    to {
        background-color: transparent;
    }
}

document.addEventListener('DOMContentLoaded', function () {
    // アニメーションで表示したいテキストを設定
    const text = "ここに長いテキストを入力します。テキストが長くなると自動的に折り返され、カーソルが適切に表示されるようになります。";
    const typingText = document.getElementById('typingText');
    // 表示する文字の位置を追跡
    let index = 0;
    // アニメーションがすでに開始されたかどうか
    let started = false;

    // 1文字ずつテキストを表示するアニメーションを実行
    function typeText() {
        if (index < text.length) {
            typingText.innerHTML = text.substring(0, index) + '<span id="typingCursor"></span>';
            index++;
            setTimeout(typeText, 100);
        } else {
            typingText.innerHTML = text + '<span id="typingCursor"></span>';
        }
    }

    // 指定された要素が画面内にあるかどうかを判定
    function isVisible(elem) {
        const rect = elem.getBoundingClientRect();
        return rect.top < window.innerHeight && rect.bottom >= 0;
    }

    // ページ読み込み時に「typingText」が画面内にあれば、アニメーションを発動する
    function startAnimationIfVisible() {
        if (!started && isVisible(typingText)) {
            started = true;
            typeText();
        }
    }

    startAnimationIfVisible();

    // スクロールして「typingText」が画面内に入ったときに、アニメーションを発動する
    window.addEventListener('scroll', function () {
        startAnimationIfVisible();
    });
});