千葉県船橋市のホームページ制作・マーケティングの株式会社ノベルティ

COLUMN

コラム

2022.04.26

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

橋本大地

JavaScript

みなさんこんにちは。エンジニアの橋本です。
今回は以前ご紹介させていただいたプリットテキストアニメーションの作り方について、2022版として再度ご紹介させていただきたいと思います!
こちらは後編の記事になっているので、前編はこちらから。

こちらのスプリットアニメーションについては、スクロールでクラスを付与するこちらの関数を利用します!
本記事でも解説しますが、詳しくご覧になりたい方は、上記のリンクからご覧ください。

目次

スプリットテキストをスクロールで動かす

表題の通り、前回の状態では、スプリットテキストにアニメーションは加えられても、発火のタイミングは制御できなかったと思います。
ですので、下記のソースを用います。

function targetAddClass(targetName, addClassName) {
    let target = document.querySelectorAll(targetName);
    target.forEach(function(elm) {
        const scriptTime = elm.dataset.scripttime;
        const rect = elm.getBoundingClientRect();
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const elmPosison = rect.top + scrollTop; 
        const windowHeight = window.innerHeight
        const delayHeightpx = windowHeight * 0.2;

        if (scrollTop > elmPosison - windowHeight + delayHeightpx) {
            let delay = scriptTime ? scriptTime : 0;
            setTimeout(function() {
                elm.classList.add(addClassName);
            }, delay);
        }

    });
}

window.addEventListener('scroll', () => {
    targetAddClass("c-split-up", "is-active");
}

こちらのコードをコピペしていただければOKです!
前回生み出されたスプリットテキスト内のspanタグが持つクラスに対し、is-activeが付与される仕組みになっているので、発火のタイミングが制御できるようになりました。
上記のソースに合わせて、前編でご紹介させていただいた下記のソースを追加しましょう

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");

実際の使い方としては、こんな感じのコンボになります。

splitTextSpan(‘.js-split’, “c-split-up”);
targetAddClass(“c-split-up”, “is-active”);


しかしながらここで問題になるのが、c-spilit-up群に高さが発生している場合です。
【高さが発生】の定義は、単純に縦書きや行落ちなどによって、発火しない位置と発火する位置が生じてしまうことを指します。

応用編:縦書きはどうしよう…

それではしっかり中身を理解したうえで、応用編といきましょう。
用途によっていろいろとソースを変える必要がありますので、必要に応じてご対応いただければと思います!

let addClassArr = document.querySelector(".js-split").querySelectorAll(".c-split-up");

addClassArr.forEach(function(elm) {
        let time = elm.dataset.scripttime;
        if (time) {
            setTimeout(function() {
                elm.classList.add("is-active")
            }, time)
        } else {
            elm.classList.add("is-active")
        }
});

まず、【分解したい文字列の親要素内】に存在する、【分割する文字列に付与する要素】を取得します。
その後、それらにis-activeを付与します。

こちらの動きをjs-splitが画面上に見えた際に発火させれば、高さに関係なくきれいに狙った通りの遅延した動きを実現することが可能になります。

まとめ

今回は特定の要素内の文字列に対し、一文字ずつ区切ってアクションを起こしてみました。
最後だけ少し複雑になってしまいましたが、子要素に対して一気にクラス付与するなどの関数は、また別の機会に個別でご紹介させていただきますね!

それではまた!

橋本大地

プロジェクトリーダー

バックエンドを経てフロントエンドの世界へ
持ち前のポジティブさと細やかさでノベルティを救う☆
元気の源は愛妻弁当!
自家用マシンでMacbookを購入することを夢見ています。
HOME | コラム | 【2022版/後編】【コピペで使える】スプリットテキストアニメーションの作り方【1文字ずつ文字を動かす】
CONTACT

お問い合わせ

お見積りの依頼やWEBに関する
お悩みがございましたら、
お電話かメールからお問い合わせください。

047-405-2227

お電話対応可能時間 平日/10:00~17:00

〒273-0005 千葉県船橋市本町5-1-1 船橋AUビル4階

船橋情報配信メディア

トコトコふなばし船橋情報配信メディア|トコトコふなばし

【船橋トコトコ大冒険メディア】として船橋の地域情報メディア、トコトコふなばしを運営。

船橋の観光スポットやイベント、グルメなど船橋の魅力を、熱く!ディープに!紹介しています。

また、船橋で活躍されている個人・企業の皆様への取材も実施しています。

船橋情報配信メディア|トコトコふなばしのとこっとちゃん

トコトコふなばしのキャラクター

とこっとちゃん

船橋に迷い込んでから船橋が気に入ってしまったトコ!

船橋を散歩しながら船橋のいいトコを紹介しているトコ。

船橋市内での取材はボクも行くトコよ~♪