一文字ずつアニメーションする文章を実装する方法

 
 

この記事では、文字が一文字ずつアニメーションする方法を説明します。

スポンサーリンク

CSSだけでごり押しする方法

まず、一番わかりやすいコードが以下です。右下のreturnをクリックすればアニメーションが始まります。

See the Pen
by awakoji (@awakoji)
on CodePen.

これは、CSSのanimationを使っていす。

さらに、HTMLで一文字ずつspanタグでくくり、それぞれanimation-delayで1秒ごとにアニメーションの開始をずらしてます。

また、backwardsを書くことで、読み込んだとき、すべて表示されてからアニメーションが起こることを防ぐことができます。(表示した瞬間から、animation 0%の状態になる)

この方法は、文字量が少なくて、1つの場所でしか使わないのでしたら、問題ないですが、文字量が多かったり、いろんな場所で使いたいとき、面倒すぎます。

なので、上記のコードをJSを使って実装していきます。

JSを使う方法

最終的なコードは以下のようになります。

See the Pen
by awakoji (@awakoji)
on CodePen.

大まかな流れは、

  • textContentでアニメーションしたいテキストを取得する
  • splitで1文字ずつ分割して配列にする
  • 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は0から始まり、forの中身を配列の数だけ繰り返します。

const targetelement = text[i];

『console.log(text[0])』で、最初の値を出力すると、<div class=”text”>・・・</div>が出力されます。

今回は、textクラスは1つだけですが、複数あれば、text[1]で2つ目の<div class=”text”>・・・</div>が出力されます。

textcontent = targetelement.textContent;

『.textContent』は、文字だけ抜き出すためのコードです。
console.log(textcontent)とすると、『lorem~』という感じで、テキストのみが出力されます。

animearray = [];

この変数に配列の値を入れていきます。

textcontent.split(“”)

lorem~のテキストを、1文字ずつ、分割し配列にします。

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『文字を1文字ずつアニメーションさせる方法と、そのバリエーション・考え方を紹介!』を参考にして書きました。とてもわかりやすく説明しているので、ぜひ見てください。

以上になります。
最後まで読んでいただいてありがとうございました。

スポンサーリンク

おすすめ記事

フォローする