この記事では、Webページ上でテキストを一文字ずつ表示するアニメーションの実装方法をまとめます。
INDEX
[JavaScript]一文字ずつ時間差で表示するアニメーション
デモはこちらです。
See the Pen [JavaScript]テキストを一文字ずつ表示すつアニメーション by asamifuruta (@asamih5) on CodePen.
HTML
<div>
<p class="js-text">Welcome to TECHLOG.</p>
</div>
CSS
.js-text span {
opacity: 0;
}
次のJavaScriptで一文字ずつspanタグで囲うので、spanの透明度を0にして見えないようにしておきます。
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);
}
}
メモ
JavaScriptによって指定した要素を一文字ずつspanで囲い、styleを変更(opacityの値を0→1に)することで、一文字ずつ表示するアニメーションを実装しました。
このTECHLOG.のメインビジュアルもこちらの方法で実装しています。Webサイトに動きを出したいときに活用してみてください!