質問: '' ) { skillsTextsArray.push(''); }else{ skillsTextsArray.push('' + s + '') } } for (let k =0; k < skillsTextsArray.length; k++){ targetSkills.innerHTML += skillsTextsArray[k]; } } } ### 試したこと (B)で作った関数(ScrollAnimation())を(A)のif文の画面の幅の方が大きくなったときに、呼び出しています。 これだとスクロールするたびに(B)が実行されてしまいます。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。 他にも$contentAnimationにshowというクラスが追加されたら(B)を実行するというif文も別途作ってみましたが、 それだとアニメーション自体が動かなくなりました。 どなたかこの問題を解決していただけると助かります。 どうかよろしくお願いいたします。
回答: ご提示のコードがJSのファイルだけなので頭の中で動かしてみました。 が、よくわかりませんでした。 Bのコードはテキストを細かく区切って遅延を差し込んでいるのかな? であるなら、遅延を差し込む区切りをタグとかとか...は違うか。 スクロールをトリガーにしているのでスクロールされるたびに`ScrollAnimation()`が実行されるけど、 `const $skillsAnimationElement`←この配列の中身が変わってないので何度も繰り返すのだと考えられます。 グローバルで定義しているから何度呼んでも全部のテキストを処理することになるのかなと。 スクロールした量と要素の位置を比較して、配列から外していく処理を記述するか、 ``` skillsTextsArray.push('' + s + '') ``` ここの`span`にclass='show'`としてしまうとか。 CSSのコード次第だけど、 ``` $contentAnimation[i].classList.add('show') //;が無いような? ``` こっちの要素には`show`を付けて一度だけの処理で終わるとすれば、 テキストの方にも同じCSSが効きそうな気がします。 「このclassが付いたらアニメーションを止める」みたいな記述がしてあるかと。 htmlとcssのコードがあれば修正したJSを貼るところですが、 無いのでこのあたりでご勘弁を。