【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が画面上に見えた際に発火させれば、高さに関係なくきれいに狙った通りの遅延した動きを実現することが可能になります。