該当するクラスの各要素までスクロールされた時に、テキストが一文字ずつ下から出現するアニメーションを実装したい。

Question

実現したいこと：
該当するクラス（.ttlWrap__main）の各要素まで、ユーザーがスクロールすると、テキストが一文字ずつ下から出現するアニメーションを実現したいです。複数個該当するクラスがあるので、同じアニメーションをスクロールされる毎に表示させたいです。

起こっている不具合：
要素までスクロールされた時に初めてアニメーションさせたいのに、スクロールイベントが効いていない（スクロールされていない間に、ローディングされるとすぐ、該当する要素全てのアニメーションが始まる）。

久しぶりの投稿です。文章や内容に分かりにくい箇所があれば教えて頂きたいです。
完全な解決策ではなくとも「ここ、問題なんじゃないか？」という点が見当たりましたら、
ご教授頂けると幸いです。

また、JavaScript初心者です、お手柔らかによろしくお願い致します。

※下記コードは必要な箇所のみ記載しています

<!-- ABOUT ME -->
        <section class="about">
            <div class="about__ttl">
                 <h5 class="ttlWrap__sub">About Me</h5>
                 <h2 class="ttlWrap__main">Who I am</h2>
            </div>
        </section>
<!-- SKILL BOX -->
        <section class="skillBox">
            <div class="skillBox__ttl">
                 <h5 class="ttlWrap__sub">Things I can do</h5>
                 <h2 class="ttlWrap__main">Skills & Tools</h2>
            </div>
        </section>

document.addEventListener('DOMContentLoaded',() => {

    // --variables--
    const $doc = document,
     $targetTtls = $doc.querySelectorAll('.ttlWrap__main');
    
 
    // --title animation--
    const ttlAnimation = (els) => {
        for (let i = 0; i < els.length; i++) {
            const ttlEls = els[i],
                    ttlTxts = ttlEls.textContent.trim(),
                    txtsArry = [];

            ttlEls.textContent = '';

            for (let j = 0; j < ttlTxts.split('').length; j++) {
                const txtSplit = ttlTxts.split('');
                if (txtSplit[j] === ' ') {
                    txtsArry.push('  ');
                } else {
                    txtsArry.push('<span style="animation-delay: ' + (j*.2) +'s;">' + txtSplit[j] + '</span>')
                }
            }
            
            for (let k = 0; k < txtsArry.length; k++) {
                ttlEls.innerHTML += txtsArry[k];
            }
        }
    }

    // animation trigger for title
     const triggerTtl = (els) => {
         for (let i = 0; i < els.length; i++) {
             const rect = els[i].getBoundingClientRect().top;
             const scroll = window.pageYOffset;
             const offset = rect + scroll;
             const windowHeight = window.innerHeight;
             if (scroll > offset - windowHeight + 200) {
                 return ttlAnimation(els);
             }
         }
     }

    $doc.addEventListener('scroll',triggerTtl($targetTtls));

}

Answer 1

最終形がみえてこないのですが一文字ずつ表示する部分ができているのであれば
IntersectionObserverを利用してみてはどうでしょうか？

交差オブザーバー API - Web API | MDN

Comments

[tomato39]

回答して頂きありがとうございます！そうですよね、HTMLとJavaScriptの記述のみでは形が見えにくいですよね。。次回から、コメントして下さる方がより形をイメージしやすいようにして質問します。IntersectionObserverのことを忘れていました！MDNのリンクもつけて頂きありがとうございます！こちら参考にしながら、もう一度取り組んでみます。

[tomato39]

IntersectionObserverを使用することにより、無事思う通りの機能をさせることが出来ました。ありがとうございます。