Hola chicos, mi cerebro está afk en este momento, así que les pregunto a todos:
Estoy tratando de hacer una animación de revelación cada vez que el elemento es visible. Por el momento, esto solo funciona cuando te desplazas hacia abajo y haces que el elemento sea visible desde la parte superior. Quiero extender esto también para desplazarme hacia arriba y hacer que el elemento sea visible desde la parte inferior.
¿Alguien puede explicarme qué debo cambiar para lograrlo?
JAVASCRIPT:
function reveal() { var reveals = document.querySelectorAll(".reveal"); for (var i = 0; i < reveals.length; i++) { var windowHeight = window.innerHeight; var elementTop = reveals[i].getBoundingClientRect().top; var elementVisible = 100; var elementHidden = ; if (elementTop < windowHeight - elementVisible) { reveals[i].classList.add("active"); } else { reveals[i].classList.remove("active"); } } } window.addEventListener("scroll", reveal); reveal();CSS:
.reveal{ transform: translateY(SOMEVALUEpx); opacity: 0; } .reveal.active{ transform: translateY(0); opacity: 1; }Agregue otra verificación en su instrucción if para ver si la parte inferior del elemento ha alcanzado la altura 0 más el valor de elementVisible .
function reveal() { var reveals = document.querySelectorAll(".reveal"); var windowHeight = window.innerHeight; var elementVisible = 100; for (var i = 0; i < reveals.length; i++) { var elementTop = reveals[i].getBoundingClientRect().top; var elementBottom = reveals[i].getBoundingClientRect().bottom; if (elementTop < windowHeight - elementVisible || elementBottom > 0 + elementVisible) { reveals[i].classList.add("active"); } else { reveals[i].classList.remove("active"); } } } window.addEventListener("scroll", reveal); reveal(); También windowHeight y elementVisible fuera del ciclo, ya que no es necesario redefinirlos para cada iteración del ciclo. Todo esto sucede en un solo pergamino.