[JavaScript] 一文字ずつ時間差で表示するアニメーション

はじめに

この記事では、Webページ上でテキストを一文字ずつ表示するアニメーションの実装方法をまとめます。

結論

JavaScriptによって指定した要素を一文字ずつspanで囲い、styleを変更(opacityの値を0→1に)することで、一文字ずつ表示するアニメーションを実装しました。

この記事では、Webページ上でテキストを一文字ずつ表示するアニメーションの実装方法をまとめます。

やり方

1. HTMLファイルの編集

<div>
    <p class="js-text">Welcome to TECHLOG.</p>
</div>

2. CSSファイルの編集

次のJavaScriptで一文字ずつspanタグで囲うので、spanの透明度を0にして見えないようにしておきます。

.js-text span {
    opacity: 0;
}

3. JavaScriptファイルの編集

document.addEventListener("DOMContentLoaded", function (event) {
    // js-textというクラスを取得し、elementsという変数を宣言
    let elements = document.getElementsByClassName("js-text");
    // animateTextという関数を、elementsの文字数の回数繰り返す
    for (var i = 0; i < elements.length; i++) {
        animateText(elements[i]);
    }
});

function animateText(element) {
    // elementの文字情報のみをtextという変数に代入
    let text = element.innerText;
    element.innerText = "";

    // textの一文字ずつをspanタグで囲う
    for (var i = 0; i < text.length; i++) {
        var span = document.createElement("span");
        span.innerText = text[i];
        element.appendChild(span);
    }

    // spanで囲った文字をspansに代入
    let spans = element.getElementsByTagName("span");
    // spansのstyleをopacity=1にする処理を、文字数分繰り返す
    for (var j = 0; j < spans.length; j++) {
        (function (index) {
            setTimeout(function () {
                spans[index].style.opacity = 1;
          }, index * 200); // 遅延時間を調整
        })(j);
    }
}