【JavaScript】Intersection Observerがブラウザーで機能しない

Question

プログラミングの初心者です。

以下のように、Intersection Observerを使ったコードで、HTMLサイトを作ろうとしたのですが、表示されるはずの画像が表示されません。

const cards = document.querySelectorAll(".card")

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      entry.target.classList.toggle("show", entry.isIntersecting)
    })
},
{
     threshold: 0.5,
})

cards.forEach(card => {
  observer.observe(card)
})

HTMLとCSSは以下の通りです。

    <script src="main.js"></script>
    

    <div class="menu_area"><center><span class="font_color"><h1 class="font_style">Menu</h1>
    <div class="menu-container">
        
        <div class="card"><img src="pizza.PNG" width="500" height="350" alt=""></div>
        <div class="card"><img src="pasta.PNG" width="500" height="350" alt=""></div>
        <div class="card"><img src="drinks.PNG" width="500" height="350" alt=""></div>
        <div class="card"><img src="dessert.PNG" width="500" height="350" alt=""></div>
    
    </div></span></center></div>

.card {
    transform: translateX(100px);
    opacity: 0;
    transition: 0.5s;
}

.card.show {
    transform: translateX(0);
    opacity: 1;
}

Answer 1

JS の読み込みを body の下に移動したら動きましたよ

Comments

[koyucat]

ありがとうございました！