Creé una pequeña animación en JS usando un cliente delimitador. Una vez que me desplazo hacia abajo hasta que aparece el texto/contenido, cambio su opacidad a 1 aplicando ".active" de CSS. Y cuando me desplazo hacia arriba sobre el elemento nuevamente, la opacidad vuelve a cambiar a 0 (porque se quita ".active").
El problema es que quiero que suceda lo mismo cuando me desplazo hacia arriba hasta el elemento de contenido desde abajo. Una vez que el usuario pasa por debajo del elemento de contenido, la opacidad debe ir a 0, luego, cuando se desplaza hacia arriba (para que el elemento de contenido esté nuevamente a la vista), la opacidad debe ir a 1. Entonces hace que la animación funcione en ambas direcciones, algo así como en la página principal de scrollrevealjs .
document.addEventListener('scroll',()=>{ let content = document.querySelector('.text'); let contentPositiontop = content.getBoundingClientRect().top; let screenPosition = window.innerHeight ; if (contentPositiontop < screenPosition){ content.classList.add('active'); } else{ content.classList.remove('active'); } }); .text{ transform: translateX(700px) translateY(1000px); font-family: Inter; font-weight: 800; font-size: 40px; opacity: 0; transition: all 2s ease; position: absolute; } .active{ opacity: 1; }Solo necesita verificar la altura de la parte inferior del elemento de contenido, así como la parte superior.
(Para la parte superior, necesitábamos agregar la altura de la pantalla (window.innerHeight) porque estábamos comparando su posición con la parte inferior de la pantalla. No necesitamos esto para la parte inferior porque estamos comparando su posición con la parte superior de la pantalla, que tiene una posición vertical de 0.)
Cuando tanto la parte inferior como la superior están dentro del rango, mostramos el elemento de contenido.
(Si la altura del elemento de contenido fuera mayor que la altura de la pantalla por algún motivo, tendría que elegir valores entre 0 y window.innerHeight para usar para desencadenar la transición).
document.addEventListener('scroll',() => { const content = document.querySelector('.text'), top = content.getBoundingClientRect().top, bottom = content.getBoundingClientRect().bottom; if (top < innerHeight && bottom > 0){ content.classList.add('active'); } else{ content.classList.remove('active'); } }); .spacer{ height: 104vh; } .text{ height: 100vh; background: blue; transform: translateX(20px); opacity: 0; transition: all 2s ease; } .active{ opacity: 1; } <div class="spacer"> </div> <div class="text"></div> <div class="spacer"> </div> .