JavaScript IntersectionObserverでひとつの要素の条件を満たした際に複数要素が動くようにしたい

Question

実現したいこと

IntersectionObserverで、ひとつめの画像とviewportが重なったとき複数の画像が同時に動き出すようにしたい

発生している問題・分からないこと

少しずつずらした画像を４枚配置していて、スクロールしてきたときに浮き出るようにしたく、以下で動かしてみました。

const fadeImg = document.querySelectorAll(".fade-img");
var options = {threshold:1};
var fadeObserver = new IntersectionObserver((entries) => {
   if(entries[0].isIntersecting) {
      entries[0].target.classList.add("fade");
      } else {
         return;
      }
}, options);
fadeImg.forEach(function(value){fadeObserver.observe(value)});

上だと一応動くのですが、これだと画像それぞれがthreshold:1になったときに動くため、動作がバラバラになってしまうので、1枚目の画像にスクロールした時点で4枚すべてが同時に動くように変更したいです。
基準となる要素(1枚目の画像)fadeImgとすべての要素(画像4枚分)fadeImgsをそれぞれ取得して監視対象にfadeImgを指定しentries[0].isIntersectingがtrueのときにfadeImgsのすべてにfor文でクラス名を追加するようにしてみたのですが、うまく動きません。
初心者なので間違っている部分が多いかと思いますが、ご教示いただけますと幸いです。よろしくお願いいたします。

該当のソースコード

    <div id="description-img">
      <img class="fade-img fade-img-first" src="img/img_01.png" alt="">
      <img class="fade-img" src="img/img_02.png" alt="">
      <img class="fade-img" src="img/img_03.png" alt="">
      <img class="fade-img" src="img/img_04.png" alt="">
    </div>

#description-img {
  position: relative;
  width: 100%;
  height: 50vh;
}

#description-img img{
  opacity: 0;
  display: block;
}

#description-img img:nth-child(1) {
  position: absolute;
  left: 0.6%;
  top: 36px;
  width: 35%;
}

#description-img img:nth-child(2) {
  position: absolute;
  left: 36.5%;
  top: 256px;
  width: 13%;
  rotate: 65deg;
}

#description-img img:nth-child(3) {
  position: absolute;
  left: 53.8%;
  top: 20%;
  width: 18%;
  rotate: -19deg;
}

#description-img img:nth-child(4) {
  position: absolute;
  left: 74.4%;
  top: 122px;
  width: 18%;
  rotate: 18deg;
}

.fade {
  animation: fade 2s;
  animation-fill-mode:forwards;
}

@keyframes fade {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

// 動かす要素を取得
const fadeImgs = document.getElementsByClassName(".fade-img");

// 起動の基準となる要素を取得
const fadeImg = document.querySelector(".fade-img-first");
let options = {threshold:1};
let fadeObserver = new IntersectionObserver((entries) => {
   if(entries[0].isIntersecting) {
      // 動かしたい要素をひとつずつ取り出してクラス名を追加
      for(var i=0; i<fadeImgs.length; i++) {
        var element = fadeImgs[i];
        element.classList.add("fade");
        // ここでfor文が機能しているか確認のためconsole.logを追加しましたが動いていないようでした
        console.log("succsess "+ [i]);
      }
   } else {
    return;
   }
}, options);
fadeObserver.observe(fadeImg);

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

element.classList.add("fade");

の部分にエラーが出ます。

補足

特になし

Comments

[int32_t]

> の部分にエラーが出ます。

どのようなエラーですか。

[mizuta_tamari]

すみません、エラーが出ていたのはfor文をforEachで記述していた修正前の段階の話でした。質問に記載したコードではエラーが出ません。一応forEachにしていたときのエラーを載せておきます。
Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
at script.js:27:41
at NodeList.forEach (<anonymous>)
at IntersectionObserver.<anonymous> (script.js:27:16)

Answer 1

const fadeImgs = document.getElementsByClassName(".fade-img");

document.getElementsByClassName("fade-img") (.を消す)か document.querySelectorAll(".fade-img") にすると動くかもしれません。

Comments

[mizuta_tamari]

・document.getElementsByClassName("fade-img") (.を消す)
・document.querySelectorAll(".fade-img")
両方試して両方とも思い通りに動作しました！ありがとうございます。