この記事では、文字が一文字ずつアニメーションする方法を説明します。
この記事の内容
CSSだけでごり押しする方法
まず、一番わかりやすいコードが以下です。右下のreturnをクリックすればアニメーションが始まります。
See the Pen
by awakoji (@awakoji)
on CodePen.
これは、CSSのanimationを使っていす。
さらに、HTMLで一文字ずつspanタグでくくり、それぞれanimation-delayで１秒ごとにアニメーションの開始をずらしてます。
また、backwardsを書くことで、読み込んだとき、すべて表示されてからアニメーションが起こることを防ぐことができます。(表示した瞬間から、animation 0%の状態になる)
この方法は、文字量が少なくて、１つの場所でしか使わないのでしたら、問題ないですが、文字量が多かったり、いろんな場所で使いたいとき、面倒すぎます。
なので、上記のコードをJSを使って実装していきます。
JSを使う方法
最終的なコードは以下のようになります。
See the Pen
by awakoji (@awakoji)
on CodePen.
大まかな流れは、
- textContentでアニメーションしたいテキストを取得する
- splitで１文字ずつ分割して配列にする
- pushで1文字ずつ<span style=”animation-delay:○○s”> </span>で囲む
といった感じ。
それぞれのコードを説明していきますね。
document.querySelectorAll(“.text”);
documentが意味するのは、HTML全体。なので、『console.log(document)』と出力すると、HTMLファイルに書いたコードが全て出力されます。
『querySelectorAll(“.text”);』では、指定したクラスの情報を取得して配列にしています。(取得するのはclassであり、idではありません。)
つまり、『document.querySelectorAll(“.text”);』というのは、HTMLの中から、textクラスの情報を取得しているということを意味します。
『console.log(text)』で代入したtextの中身を見てみると、
『NodeList(1)
▶0: div.text
length: 1
▶[[Prototype]]: NodeList』
となって、▶をクリックすると、いろんな情報が入っていることがわかります。
text.length
.lengthは配列の数を出力します。iは０から始まり、forの中身を配列の数だけ繰り返します。
const targetelement = text[i];
『console.log(text[0])』で、最初の値を出力すると、<div class=”text”>・・・</div>が出力されます。
今回は、textクラスは１つだけですが、複数あれば、text[1]で2つ目の<div class=”text”>・・・</div>が出力されます。
textcontent = targetelement.textContent;
『.textContent』は、文字だけ抜き出すためのコードです。
console.log(textcontent)とすると、『lorem～』という感じで、テキストのみが出力されます。
animearray = [];
この変数に配列の値を入れていきます。
textcontent.split(“”)
lorem～のテキストを、１文字ずつ、分割し配列にします。
textcontent.split(“”)[0]には、loremの一文字目『l』、textcontent.split(“”)[1]には、loremの二文字目『o』が入っています。
単語間のスペースも分割され配列に入ります。
animearray.push
先ほど作った空の配列『animearray』に、textcontent.splitで分割した文字を1つずつ、spanタグをつけて入れていきます。
if (textcontent.split(“”)[j] === ” “)
単語間のスペースを配列に入れる場合は、spanをつける必要はないので、条件分岐します。
『===” “』の『” “』にはスペースが入っています。
animearray.push(” “);
textcontent.split(“”)のj番目がスペースであれば、スペースのみを配列animearrayに入れます。push(” “)の『” “』にはスペースが入っています。
animearray.push(‘<span style=”animation-delay: ‘ + (j*0.05) + ‘s;”>’ + textcontent.split(“”)[j] + ‘</span>’)
textcontent.split(“”)のj番目がスペースでないときは、spanタグをつけます。このとき、『style=”animation-delay: ‘ + (j*0.05) + ‘s;』とすることで、1文字ずつあにめーしょんを遅らせることができるようになります。
targetelement.innerHTML += animearray[k];
『a += b;』は、『a = a + b』を意味します。
『targetelement.innerHTML += animearray[k];』は、『targetelement.innerHTML = targetelement.innerHTML + animearray[k];』を意味します。
先ほどanimearrayにいれた、文字を順番に、targetelement.innerHTMLの中に入れていきます。
.innerHTMLで文字だけを取得しています。
targetelementには、『<div class=”text”>lorem・・・</div>』が入っています。このままでは、lorem・・・の中に、さらにloremがはいってしまうので、直前で、
『targetelement.textContent = “”;』
として文字を空にしています。
以上のコードによって、文字の一つ一つが<span style=”animation-delay:○○s>タグで囲まれるようになりアニメーションが完成します。
今回の記事は、YouTube『文字を１文字ずつアニメーションさせる方法と、そのバリエーション・考え方を紹介！』を参考にして書きました。とてもわかりやすく説明しているので、ぜひ見てください。
以上になります。
最後まで読んでいただいてありがとうございました。