JavaScriptのアニメーションを実行したい

Question

前提・実現したいこと

JavaScriptでスクロールアニメーションを作っています。
(A)スクロールしたらcontentsがふわっと出てくるアニメーションと、
(B)contentsの中の文字が順番に出てくるアニメーションを作りたいのですが、
(A)は一回アニメーションが発生したら終わるのですが、(B)はスクロールをするたびにアニメーションが発生してしまいます。
僕としては(B)も一回だけアニメーションが発生するように実装したいです。

発生している問題・エラーメッセージ

(B)がスクロールするたびにアニメーションが発生してしまう。

該当のソースコード

// こちらが(A)のアニメーションです。

const $contentAnimation = document.querySelectorAll('.js-animation');

document.addEventListener('scroll',()=>{
for (let i = 0; i < $contentAnimation.length; i++){
const $getElementDistance = $contentAnimation[i].getBoundingClientRect().top
+ $contentAnimation[i].clientHeight * .6;

    if (window.innerHeight > $getElementDistance){
        $contentAnimation[i].classList.add('show')
        ScrollAnimation();
    }
}

});

// こちらが（B）のアニメーションです。

const $skillsAnimationElement = document.querySelectorAll('.skillsAnimation');

function ScrollAnimation(){
for (let s = 0; s < $skillsAnimationElement.length; s++){
const targetSkills = $skillsAnimationElement[s],
skillsTexts = targetSkills.textContent,
skillsTextsArray = [];

    targetSkills.textContent = '';

    for (let j = 0; j < skillsTexts.split('').length; j++){
        let s = skillsTexts.split('')[j];
        if (s === '' ) {
            skillsTextsArray.push('');
        }else{
            skillsTextsArray.push('<span><span style="animation-delay: ' + ((j * .5) + .3) + 's;">' + s + '</span></span>')
        }
    }

    for (let k =0; k < skillsTextsArray.length; k++){
        targetSkills.innerHTML += skillsTextsArray[k];
    }

}

}

試したこと

(B)で作った関数（ScrollAnimation()）を(A)のif文の画面の幅の方が大きくなったときに、呼び出しています。
これだとスクロールするたびに(B)が実行されてしまいます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

他にも$contentAnimationにshowというクラスが追加されたら(B)を実行するというif文も別途作ってみましたが、
それだとアニメーション自体が動かなくなりました。

どなたかこの問題を解決していただけると助かります。
どうかよろしくお願いいたします。

Answer 1

ご提示のコードがJSのファイルだけなので頭の中で動かしてみました。
が、よくわかりませんでした。

Bのコードはテキストを細かく区切って遅延を差し込んでいるのかな？
であるなら、遅延を差し込む区切りを<p>タグとか<div>とか…は違うか。

スクロールをトリガーにしているのでスクロールされるたびにScrollAnimation()が実行されるけど、
const $skillsAnimationElement←この配列の中身が変わってないので何度も繰り返すのだと考えられます。
グローバルで定義しているから何度呼んでも全部のテキストを処理することになるのかなと。

スクロールした量と要素の位置を比較して、配列から外していく処理を記述するか、

skillsTextsArray.push('<span><span style="animation-delay: ' + ((j * .5) + .3) + 's;">' + s + '</span></span>')

ここのspanにclass='show'`としてしまうとか。
CSSのコード次第だけど、

$contentAnimation[i].classList.add('show') //;が無いような？

こっちの要素にはshowを付けて一度だけの処理で終わるとすれば、
テキストの方にも同じCSSが効きそうな気がします。
「このclassが付いたらアニメーションを止める」みたいな記述がしてあるかと。

htmlとcssのコードがあれば修正したJSを貼るところですが、
無いのでこのあたりでご勘弁を。

Comments

[akito-miyazato]

ご回答ありがとうございます。
情報が少なくて申し訳ございません。
HTMLとCSSの情報もお送りしますので、ぜひご回答いただけますと幸いです。

//(A)//
(A)に関しては各コンテンツに'show'が追加されるようにしています。

htmlは　
<div class="skills js-animation">
<div class="skills-box">
<div class="skills-item">
この中にtitleやicon,messageなどの要素も入ってます。
</div>
</div>
</div>

CSSは

.skills{
opacity: 0;
transition: .6s;
transform: translateY(-50px);
}

.skills.show{
opacity: 1;
transform: none;
}

//(B)//
(B)に関しては skillsの中のレベルを表す星マークを順番に出したいと思ってます。

HTMLは、上記の要素の中に星マークを入れております。
<div class="skills js-animation">
<div class="skills-box">
<div class="skills-item">
<div class="skillsAnimation">★★★★☆</div>
</div>
</div>
</div>

CSSは横か文字が出てくるように実装しています。

@keyframes skillsShow {
0%{
opacity: 0;
transform: translateX(200px);
}
100%{
opacity: 1;
transform: none;
}
}

.skillsAnimation span{
display: inline-block;
}

.skillsAnimation span{
margin: 10px 0;
animation: skillsShow .8s backwards;
}

これで先ほどのJavaScriptだとスクロールするたびに星のアニメーションが実行されてしまいます。
星のアニメーションはskillsのコンテンツが(A)によってふわっと出てきたときに1回だけ実行したいです。

大変お手数おかけいたしますが、ぜひご回答よろしくお願いいたします。

[退会済みユーザー]

スクロールするたびに全部☆を拾っているのが原因なので、
showがついていない一番上の１個のみ取得して引数として関数に渡してみました。
関数を実行する条件は画面上に見える☆の高さまで…かな？
関数の中にあったループは外しました。
渡した１個のみ操作すればいいので。

動くようになったコードを捨てるのももったいないので貼っておきますね。
差分チェックしながら調整をしてみてください。
※html、cssは特に弄ってないので割愛させていただきますね。

const $contentAnimation = document.querySelectorAll('.js-animation');

document.addEventListener('scroll',()=>{
for (let i = 0; i < $contentAnimation.length; i++){
const $getElementDistance = $contentAnimation[i].getBoundingClientRect().top + $contentAnimation[i].clientHeight * .6;

if (window.innerHeight > $getElementDistance){
$contentAnimation[i].classList.add('show');
}
}

let item = document.querySelector('.skillsAnimation:not(.show)');
const getItemDistance = item.getBoundingClientRect().top + item.clientHeight * .6;

if (window.innerHeight > getItemDistance){
item.classList.add('show');
ScrollAnimation(item);
}
});

function ScrollAnimation(item){

const targetSkills = item;
skillsTexts = targetSkills.textContent;
skillsTextsArray = [];

targetSkills.textContent = '';

for (let j = 0; j < skillsTexts.split('').length; j++){
let s = skillsTexts.split('')[j];
if (s === '' ) {
skillsTextsArray.push('');
} else {
skillsTextsArray.push('<span><span style="animation-delay: ' + ((j * .5) + .3) + 's;">' + s + '</span></span>');
}
}

for (let k =0; k < skillsTextsArray.length; k++){
targetSkills.innerHTML += skillsTextsArray[k];
}
}

追記　すみません、動作が少しおかしいのでもう一度確認します。
追記　頭が寝てました。DOM操作用のJSなのにhead内に置いてました。動きます。
追記　追記を下に動かしました。念のためにここに貼ったコードで再確認しましたが動きました。
お騒がせしてすみません。拙いコードですが参考までにどうぞ。

[akito-miyazato]

ご丁寧にありがとうございます。
おかげさまで動きました。
今後もしわからないことがございましたら、ぜひ教えたいただけますと幸いです。
本当にありがとうございました。