Necesito hacer que los divs aparezcan así, o de cualquier otra forma elegante. ¿Alguien puede proporcionar una fuente o algo que pueda ayudar?
Podemos agregar el nombre de clase de un atributo CSS con una transición y una propiedad de animación para cambiarlo de un elemento de opacity: 0 a un elemento de opacity: 1 , y asignarle un atributo de animation que lo deslice usando la propiedad de transform de CSS.
Podemos usar getBoundingClientRect y scrollTop para verificar cuándo el elemento está a la vista y agregar la clase cuando lo esté.
Esto nos da algo cercano al efecto deseado.
document.addEventListener("scroll", (event) => { const elementsToAnimate = Array.from(document.querySelectorAll(".stationary")); for (element of elementsToAnimate) { const { scrollTop } = document.querySelector("html"); const { top } = element.getBoundingClientRect(); const containsAnimateClass = element.classList.contains("from-left"); if (top < scrollTop / 2 && !containsAnimateClass) element.classList.add("from-left"); } }); body { display: flex; flex-direction: column; gap: 1rem; } .stationary { opacity: 0; width: 100px; height: 100px; background: red; } .from-left { transition: 1s ease; opacity: 1; animate: 1s ease slide-in-from-left; } @keyframes slide-in-from-left { from { transform: translateX(-50%); } to { transform: translateX(0); } } <body> <div>Scroll!</div> <div class="stationary"></div> <div class="stationary"></div> <div class="stationary"></div> <div class="stationary"></div> <div class="stationary"></div> <div class="stationary"></div> <div class="stationary"></div> <div class="stationary"></div> <div class="stationary"></div> <div class="stationary"></div> </body>Puede usar bibliotecas simples ya implementadas estas animaciones:
https://github.com/matthieua/GUAU
https://scrollmagic.io/examples/basic/reveal_on_scroll.html
https://michalsnik.github.io/aos/ (Personalmente me encanta esto, es fácil de usar)
O, por otro lado, haz tu propia animación. agregue un detector de eventos para desplazarse y cree una animación de fotogramas clave. Luego, asigne la clase al elemento cuando el desplazamiento alcance el número deseado.