Inicialmente, la opacidad del elemento secundario se establece en 0, excepto para el primer elemento secundario que ya está en la parte superior, y cuando el desplazamiento pasa al siguiente elemento secundario en llegar a la parte superior del contenedor principal, la opacidad se establecerá en 1 y lo mismo sucede para el resto del niño.
<div class="parent"> // scrollable parent container <div class="child">I am child 1</div> // currently visible child with opacity 1 <div class="child">I am child 2</div> // next child element with opacity 0.5 <div class="child">I am child 3</div> // next child element with opacity 0.5 ..... </div>He visto esta publicación Aumentar la opacidad del elemento cuando el usuario se desplaza hacia abajo en la página , pero esta es jquery. No puedo encontrar algo similar para javascript puro y también esto solo contiene un elemento secundario.
No sé por dónde empezar. Cualquier ayuda es muy apreciada.
Bien, después de varias horas de intentarlo/buscar. Finalmente pude resolverlo. Publicaré mi solución para que pueda ayudar a otros que tendrán el mismo caso de uso conmigo.
const parentContainer = document.getElementById('parent'); parentContainer.addEventListener( 'scroll', event => { [].slice.call(event.target.children).map(el => { if (el.offsetTop - 100 < event.target.scrollTop) { el.style.opacity = 1 - ((el.clientHeight - event.target.scrollTop) / el.clientHeight) * 0.7 + 0.3; } else { el.style.opacity = 0.3; } }); } ) Lo que hice anteriormente es obtener el elemento principal y agregar un detector de eventos de scroll . Asigne a través de sus elementos secundarios y luego obtenga el valor offsetTop secundario y compárelo con el valor scrollTop principal, si es menor que aplique la lógica que encontré en el enlace de referencia anterior para aumentar la opacidad, de lo contrario (al desplazarse hacia arriba) vuelva a la opacidad predeterminada.
Espero que esto sea claro para cualquiera que busque la misma solución.