テキストを1文字ずつ表示するアニメーションをJSとCSSで実装する方法｜カケウェブ

テキストを1文字ずつ表示するアニメーションを実装します。
１文字ずつ表示するアニメーションは、1文字ずつspanなどで囲う必要がありますが、毎回spanをつけるのは面倒なので、JavaScriptで自動でつけるようにしています。

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

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

HTMLを作成

１文字ずつ表示するアニメーションのベースを作成します。
今回「js-text-anime」というclassがついていれば動作するようにします。
※必要があれば任意のclassに変更してください。

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

CSSで初期値をいれる

「js-text-anime」内の「span」を非表示にします。
また「transition」で、文字が表示されるまでの時間を設定しています。

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

JavaScriptでspan追加とアニメーションをつける

JavaScriptで、「js-text-anime」をつけているテキストにspanの追加します。
次の文字が表示するまでの遅延時間も自由に変更できるので調整してみてください。

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

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

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

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