Javascript Animation für mehr als ein Element

Sundream

Hallo,

ich habe einen Code, den ich auf eine Galerie anwenden will. EIne bestimmte Animation soll immer geladen werden, wenn auf ein Bild gescrollt wird.

Das habe ich alles soweit hinbekommen. Jetzt ist es aber eine Galerie, die nicht nur aus einem Bild, sondern aus mehreren Bildern nebeneinander besteht. Ich möchte gerne, dass diese alle animiert werden. Derzeit funktioniert es aber nur für ein einziges Bild, wenn ich allen Bildern die gleiche Klasse gebe... auch, wenn ich die Klasse ändere und den Code dupliziere, funktioniert es nur für ein Bild. Was muss ich tun um das zu ändern?

Hier der JS Code:

Code

    const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const square = entry.target.querySelector('.square');

    if (entry.isIntersecting) {
      square.classList.add('fadeInDown');
    return; // if we added the class, exit the function
    }

    // We're not intersecting, so remove the class!
    square.classList.remove('fadeInDown');
  });
});

observer.observe(document.querySelector('.column'));

Alles anzeigen

Ich denke der Fehler ist, dass die Klasse nur einmal abgefragt wird und nicht alle gesucht werden. Aber ich weiß nicht, was ich ändern muss...

Danke!

Sundream

Hat sich erledigt, hab die Lösung mit Hilfe einer KI gefunden

Hier der Code wie er dann sein müsste:

Code

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const squares = entry.target.querySelectorAll('.square');
    squares.forEach(square => {
      if (entry.isIntersecting) {
        square.classList.add('fadeInDown');
      } else {
        // We're not intersecting, so remove the class!
        square.classList.remove('fadeInDown');
      }
    });
  });
});
observer.observe(document.querySelector('.column'));

Alles anzeigen