ノベルティメディア

MEDIA

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

【2022版/前編】【コピペで使える】スプリットテキストアニメーションの作り方【1文字ずつ文字を動かす】
橋本大地
【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と組み合わせる例をご紹介させていただいて、今回のスプリットアニメーションの幅をぐっと広げていきたいです!
それではまた!

この記事をシェアする
橋本大地

橋本大地

Engineer

バックエンドを経てフロントエンドの世界へ 持ち前のポジティブさと細やかさでノベルティを救う☆ 元気の源は愛妻弁当! 乾電池を通勤カバンに常備しているのできっと電池で動いています。

Webプロモーション・業務改善は
ノベルティひとつで完結

はじめての依頼にも
全力でサポートさせていただきます

メールでのお問い合わせ

おすすめ記事/ PICKUP

    記事カテゴリー/ CATEGORY

      Webプロモーションや業務改善・DX化

      企業の課題はノベルティひとつで完結

      ホームページ制作などのWeb制作をはじめ、
      システム開発やマーケティング支援などワンストップで対応
      まずはお気軽にお問い合わせください

      お問い合わせ

      お電話またはメールでお気軽にお問い合わせください。