トップへ戻る
BLOGS

JS 文字を一つづつアニメーションさせます(HTML、JS編)

JS 文字を一つづつアニメーションさせます(HTML、JS編)

今回は良くおしゃれなサイトなどで見かけるタイトルなどが一文字づつアニメーションさせる方法をHTMLとJS編、CSS編と分けてご紹介、記録しておこうと思います。

いきなりですが答えのコードです。

const animationElements = document.querySelectorAll(".text-animation");
for (let i = 0; i < animationElements.length; i++) {
  const targetelement = animationElements[i],
  texts = targetelement.textContent;

  textArray = [];
  targetelement.textContent = "";

  for (let j = 0; j < texts.split("").length; j++) {
    if (texts.split("")[j] === " ") {
      textArray.push(" ");
    } else {
      textArray.push('<span style="animation-delay: ' + (j * .1) + 's;">' + texts.split("")[j] + '</span>');
    }
  }
  for (let k = 0; k < textArray.length; k++) {
    targetelement.innerHTML += textArray[k];
  }
}

さてでは順番に解説しながら見ていきます。

雛形となるHTMLはこちら

<main>
    <div class="text-animation">おジャコの</div>
    <div class="text-animation">Webキッチンへ ようこそ</div>
  </main>

シンプルにクラスをつけただけのタグを用意します。

こちらにJSを使用し<span>タグで全て囲うようにしてさらにCSSでは面倒なタイミングを遅らせる処理までやっていこうと思います。

まずは上のタグをJSで取得します。

const animationElements = document.querySelectorAll(".text-animation");

querySelectorAllはクラスやタグを指定し配列として取得してきます。

この配列で取得したデータをfor文を使用し全て一旦変数にしたいと思います。Internet Explorer 11はforeachに対応していないようなのでforeachでの書き方はまた今度にします。

ではfor文から

for (let i = 0; i < animationElements.length; i++) {
 //ここに処理を書きます。
}

animationElements.length;で配列の数分繰り返すようになります。

配列は[]の番号で取り出すことができるためこれで全ての番号を指定し変数にしておきます。

const targetelement = animationElements[i],

さて次に変数にしまったtargetelementから中にあるテキストだけを抽出し、また変数に格納します。

texts = targetelement.textContent;

.textContent;で中のテキストを抽出できました。

空の配列の箱を用意するとともにタグのテキストを空にする

textArray = [];
  targetelement.textContent = "";

textArray = [];の[]の中を空にして用意しておきます。後でこの中に抽出したテキストを入れるためのものです。

また .textContent = “”;とすることで現在のタグの中のテキストを空にしておきます。こちらの理由はこちらも後で<span>タグで囲ったテキストを中に入れるためです。

texts.split(“”)

.split(“”)は変数に対して””で区切った配列を作成する関数ですが.split(“”)のように空で指定することで強制的に変数を配列化することが出来ます。

こちらで配列に変換したテキストを再びfor文で回し先に用意したからの配列の箱に入れて行こうと思います。

for (let j = 0; j < texts.split("").length; j++) {
    
  }

for文の中でまたfor文を使っているのでこちらの変数はjにしております。

texts.split(“”).lengthとすることで配列の個数分繰り返すということですね。

textArray.push('<span>' + texts.split("")[j] + '</span>');

textArray.push()は配列にさらに値を追加すると言う意味になりこの場合HTMLの<span>タグを + でつなげて上の例と同じ全ての配列の中身を追加することになります。

後は本日三度目の登場のfor文でtextArrayの中身をもとのタグに戻してあげればOKですね。具体的には、

for (let k = 0; k < textArray.length; k++) {
    targetelement.innerHTML += textArray[k];
  }

targetelement.innerHTMLで先に空にしておいたHTMLの中にさらにHTMLを追加するという意味になります。追加して代入したいのでこの場合はではなく+=を使用します。

これで全てのテキストをタグで囲えました。

そしてアニメーションさせるということでせっかくfor文を使用しているのでその中でスタイルを使用しディレイをかけてやろうと思います。

少々訂正を、、

textArray.push('<span style="animation-delay: ' + (j * .1) + 's;">' + texts.split("")[j] + '</span>');

こうしてHTMLの中に直接スタイルを指定するわけですがそのまま指定するのでは全てのタグにあたってしまうのでこの数値の指定方法を現在ループで回しているで指定してあげます。

‘ + (j * .1) + ‘s;中に書くのでシングルクォーテーションと+記号で繋いであげる事と、そのままではペースが遅すぎるため乗算をしてだんだん早くなるようにしておきます。

長くなりましたがこれでCSSで自由にアニメーションさせる準備が整いました。

続きはCSS編へもちこしですね

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA