es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Elementos animados ya presentes en la página funcionando de manera intermitente mediante el observador de intersección.

Elementos animados ya presentes en la página funcionando de manera intermitente mediante el observador de intersección.

21 Jul, 2023 Programación

Estoy intentando animar elementos utilizando Intersection Observer pero obtengo un comportamiento extraño de los elementos que ya se encuentran en la pantalla al cargar la página.

A veces se animan correctamente de forma aleatoria y otras veces no lo hacen.

const faders = document.querySelectorAll(‘.fade-in’);
const sliders = document.querySelectorAll(‘.slide-in’);

const appearOptions = {
threshold: 0,
rootMargin: “0px 0px -200px”
};

const appearOnScroll = new IntersectionObserver((entries, appearOnScroll) => {

entries.forEach(entry => {


    if (!entry.isIntersecting){
        return
    }

    else{
        entry.target.classList.add("appear");
        appearOnScroll.unobserve(entry.target);
    }
})

}, appearOptions);

faders.forEach(fader => {
appearOnScroll.observe(fader);
});

sliders.forEach(slider => {
appearOnScroll.observe(slider);
});

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Es posible que el comportamiento irregular sea causado por el hecho de que el IntersectionObserver de appearOnScroll se activa cuando los elementos ya son visibles al cargar la página. Una solución para esto podría ser agregar una verificación para comprobar si el elemento ya ha sido animado antes de aplicar la clase appear. Esto se puede hacer agregando un atributo personalizado al elemento cuando se anima y verificando ese atributo antes de agregar la clase nuevamente. Por ejemplo:

    const faders = document.querySelectorAll('.fade-in');
const sliders = document.querySelectorAll('.slide-in');

const appearOptions = {
  threshold: 0,
  rootMargin: "0px 0px -200px"
};

const appearOnScroll = new IntersectionObserver((entries, appearOnScroll) => {

  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      return;
    }

    // Verificar si el elemento ya ha sido animado
    if (entry.target.getAttribute('data-appeared')) {
      return;
    }

    // Agregar la clase appear y marcar como animado
    entry.target.classList.add("appear");
    entry.target.setAttribute('data-appeared', true);
    appearOnScroll.unobserve(entry.target);
  });
}, appearOptions);

faders.forEach(fader => {
  appearOnScroll.observe(fader);
});

sliders.forEach(slider => {
  appearOnScroll.observe(slider);
});

    Este código agrega un atributo data-appeared a cada elemento después de que se anima y verifica ese atributo antes de intentar animar el elemento nuevamente. Esto debería evitar el comportamiento irregular que estás experimentando.

Comments are closed.