【2022版/前編】【コピペで使える】スプリットテキストアニメーションの作り方【1文字ずつ文字を動かす】

みなさんこんにちは。エンジニアの橋本です。
今回は以前ご紹介させていただいたスプリットテキストアニメーションの作り方について、2022版として再度ご紹介させていただきたいと思います！
こちらについては、以前ご紹介させていただいたバージョンよりももっと簡単で、初心者の方でもとっつきやすい内容になっています！

こちらのスプリットアニメーションについては、スクロールでクラスを付与するこちらの関数と一緒に動かしていただくことでより簡単に、より幅広い実装が可能になりますので、今回の記事を読んでいただいた後に、まだ読まれていない方は見てみてくださいね。

結果として得られるもの

スプリットアニメーション、と言っても何となくふわっとしてしまいますよね。
今回ご紹介させていただく関数のゴールとしては、

<div class="js-split" data-scripttime="40">NOVELTYSHIP</div>

上記のソースが、

<div class="js-split" data-scripttime="40" style="opacity: 1;"><span class="c-split-up" data-scripttime="0">N</span><span class="c-split-up" data-scripttime="40">O</span><span class="c-split-up" data-scripttime="80">V</span><span class="c-split-up" data-scripttime="120">E</span><span class="c-split-up" data-scripttime="160">L</span><span class="c-split-up" data-scripttime="200">T</span><span class="c-split-up" data-scripttime="240">Y</span><span class="c-split-up" data-scripttime="280">S</span><span class="c-split-up" data-scripttime="320">H</span><span class="c-split-up" data-scripttime="360">I</span><span class="c-split-up" data-scripttime="400">P</span></div>

このようになって帰ってくることとします。これによって後編でご紹介させていただく予定のクラス付与が出来たり、CSSで個別に見せ方を制御することや強調のためのドットづけをすることも容易になりますね。

例としては、当ホームページのメインビジュアルのように、【NOVELTYSHIP】を一文字ずつアニメーションすることが可能になります。
https://noveltyinc.jp/
こちらで何度かリロードしていただいて、一文字ずつ動く様子を見てみましょう！
リッチな雰囲気が演出できます。

htmlとcssの解説

htmlは先ほど書いた通りです。
一文字ずつ動かすときは、それぞれの動きを遅延させたりすることが重要になりますので、【data-scripttime=”(n)”】を実装することで遅延する時間を設定することを可能にしています。

cssはとてもシンプルで、js-splitにopacity:0を指定しています。
こちらは透明化させておかないと、スプリット化する際に変な動きをしてしまうのを防止する効果があります。

JSの解説

それでは、肝心のjsです。

function splitTextSpan(targetElm, addClass) {
    document.querySelectorAll(targetElm).forEach((splitText) => {
        let arr = splitText.textContent.split('');
        let innerHtmlText = "";
        let count = 0;
        for (let i = 0; i < arr.length; i++) {
            if (!arr[i].match(/\s+/)) {
                let time = splitText.dataset.scripttime;
                if (time) {
                    innerHtmlText += '<span class="' + addClass + '" data-scripttime="' + (time * count) + '">' + arr[i] + '</span>';
                } else {
                    innerHtmlText += '<span class="' + addClass + '">' + arr[i] + '</span>';
                }
                count++;
            }
        }
        splitText.innerHTML = "";
        splitText.innerHTML = innerHtmlText;
        splitText.style.opacity = "1";

    });
}

splitTextSpan('.js-split', "c-split-up");

やっていることは単純で、js-splitのクラスが付与された要素のテキストを取得し、一文字ずつバラします。
その後それらに対して、<span>タグで囲むこと、引数のクラスを付与すること、data属性から取得したscripttimeの掛け算をdata-scripttimeとして設定することを行っています。
遅延に対して掛け算であるため、少しだけ使用感が限定されてしまう感もありますが、
Web制作の場においては、一文字ずつアニメーションの処理を遅延して実行できるリッチな体験を得ることが可能になります。

ポイント解説

それではこれまでのソースをポイントで解説させていただきます。
コピペで動かせたからまぁOK…ふぅの場合は、ここまでで問題ありません！
後半にいきましょう！

ご紹介させていただいたjsの引数解説

splitTextSpan(分解したい文字列の親要素,分割する文字列に付与するクラス名)

引数を日本語で解説するとこのようなかたちです。
spanタグでくくられるので、分解したい文字列の親要素は、divなどがよいですね。

ソース解説

ソースの解説として、要点はこちらの三点です。

1. 取得したテキストを一文字ずつ分解する
2. 余計な文字列や空白文字はスキップ
3. 一文字ごとに必要な変換処理をする

となっております！

それではまず、【取得したテキストを一文字ずつ分解する】から。

 let arr = splitText.textContent.split('');

それについてはこちらです。
textContentで文字列の親要素(splitText)の文字列を取得して、split(”)で分解する仕組みです。

続いて【余計な文字列や空白文字はスキップ】です。
正規表現で対処します。

if (!arr[i].match(/\s+/)) {

\sは空白文字（スペース、タブ、改行）にマッチするので、ソース上の余計な文字列は排除します。もし空白文字を含みたい場合は、正規表現を変えましょう。

続いて【一文字ごとに必要な変換処理をする】です。

innerHtmlText += '<span class="' + addClass + '" data-scripttime="' + (time * count) + '">' + arr[i] + '</span>';

こちらで一文字(arr[i])をspanタグでくくって、data属性を付与しています。
この時にtime*countで遅延時間を均等に出しています。ポイントはiを使わないこと。iは余計な文字列も含むループなので、countで導き出してあげる必要があります。

これらのポイントを踏まえ、コピペしたソースを一行ずつ読んでいただけると、中身がわかるのではないかなと思います！

まとめ

実際にjsを読んでいただくと、決して難しくないことが分かるかと思います。
特に今回のjsのポイントは、html側の可読性を損なわないこと。CSSのアニメーションは出来るけど、jsで色々やるのは苦手…といった方でも利用しやすい内容になっているかと思いますので、ぜひぜひ使ってみてくださいね！

それでは後編では他のjsと組み合わせる例をご紹介させていただいて、今回のスプリットアニメーションの幅をぐっと広げていきたいです！
それではまた！