テキストを１文字ずつ表示するアニメーションをCSSとJSで作る

JavaScriptとCSSを使って、テキストを１文字ずつ表示するアニメーションを作ってみました。

テキストを１文字ずつ表示するアニメーションをCSSとJSで作る

１文字ずつアニメーションを付ける系は、1文字ずつspanで加工必要があります。
ただ、HTMLで毎回spanで囲うのはめんどくさいので、JavaScriptで自動でspanを追加します。

ではまずHTMLから

<div class="js-text-anime">Hello, World!</div>

class「js-text-anime」をつけることで、今回のアニメーションを追加できます。

続いてCSS。
CSSでは、初期の文字を隠す＋表示までの時間を指定します。
「transition」の数字は自由に変更してください。

.js-text-anime span {
    opacity: 0;
    transition: 0.5s;
}

JavaScriptで、１文字ずつspanで囲うのと、表示するアニメーションを追加します。
文字と文字の表示までの時間は、コメント部分を変更することで変更可能です。

document.addEventListener("DOMContentLoaded", function (event) {
            let elements = document.getElementsByClassName("js-text-anime");
            for (let i = 0; i < elements.length; i++) {
                animateText(elements[i]);
            }
        });

        function animateText(element) {
            let text = element.innerText;
            element.innerText = "";

            for (let i = 0; i < text.length; i++) {
                var span = document.createElement("span");
                span.innerText = text[i];
                element.appendChild(span);
            }

            let spans = element.getElementsByTagName("span");
            for (let j = 0; j < spans.length; j++) {
                (function (index) {
                    setTimeout(function () {
                        spans[index].style.opacity = 1;
                    }, index * 200); // 遅延時間を調整したい場合はここの数値を変更してください
                })(j);
            }
        }