🔥

テキストの文字を1文字ずつ数秒ずらしながらアニメーションさせる

2024/03/13に公開

JavaScript

CSS 3

HTML 5

tech

よく文字をほんの0.数秒ずつ1文字1文字アニメーションさせてるサイトありますよね。あれめっちゃかっこいいです。憧れます。というわけで今回も色々と各サイトを参考にしながらやってみます。

本題

今回キーとなるメソッドがこちら

splitメソッド
引数の文字列を分割し配列で返してくれる。
引数に文字列を指定していない場合、無条件

それともう一つElementオブジェクトのプロパティである

汎用性の高いinnerHTMLプロパティ

考え方

まず1文字ずつCSSを定義する為には1文字ずつタグで囲む必要がある。

<span>こ</span>
<span>ん</span>
<span>ば</span>
<span>ん</span>
<span>は</span>

しかしこのようにHTMLにそのままベタで<span>タグで書くのは非常に手間だし、なによりテキストの数が増える可能性がある事を想定すると効率が悪い。
ここで登場するのが上記のsplitメソッドとinnerHTMLプロパティ。

HTMLに記述されているアニメーションさせたいタグの文字をsplitで配列で返し、配列化した文字を<span>タグで囲み、予め用意した空の変数Aに対して代入し、その変数AをinnerHTMLでアニメーションさせたい要素に文字を代入すればよい。

補足として何故空の変数を用意するかというと、アニメーションさせる予定である文字列を空欄にしなければ後にアニメーションさせた文字列とさせる前の文字列が両方表示されてしまうためである。一度文字列を空にしてinnerHTLMプロパティの値を上書きするイメージ。

function TextAnimation() {
    const AnimationText = document.getElementById('title_text');
    let ArrayTitleText = AnimationText.textContent.split('');
    let TitleText = '';
    for (let i = 0; i < ArrayTitleText.length; i++) {
        TitleText += '<span>' + ArrayTitleText[i] + '</span>';
        AnimationText.innerHTML = TitleText;
    }
}
TextAnimation()

これでアニメーションさせたい文字に対して<span>タグで囲うことが出来た。
そして肝心の「数秒ずつずらしながらアニメーション」を再現するにはどうしたらいいか。
今回はstyle属性でCSSのanimation-delayプロパティを0.1sずつ増やすことにした。
つまり上記コードの6行目を

TitleText += '<span style="animation-delay:' + (i * 0.1) + 's;">' + ArrayTitleText[i] + '</span>';

という記述にすればanimation-delayが1文字ずつずれたアニメーションが実装出来る。

本題

考え方

Discussion