Fíjate en la animación de las imágenes conforme voy haciendo scroll, pues esto está hecho solo con CSS, con cero líneas de JavaScript y te voy a enseñar en este vídeo cómo hacerlo.
Antes te aviso, esta es una funcionalidad muy nueva y tiene un soporte del 38% porque es que acaba de salir.
En la última versión de Chrome y Edge está disponible y va a llegar muy pronto a Firefox, pero no pasa nada.
Tú podrías utilizar esta funcionalidad y si no lo soporta por lo que sea en navegador, pues no se verá, pero seguirá viendo la página web, así que no te preocupes.
Esta sería la página web con la que queremos trabajar. Fíjate que ahora cuando hago scroll, pues están ahí las imágenes como si nada.
Aquí tenemos el HTML con sus títulos, párrafos, imágenes, nada especial y el CSS ahora bastante sencillito, donde tenemos un ancho máximo para centrarlo con el margin cero auto,
font family, un poquito de fuentes, un poquito de estilito, pero nada raro. Ahora mismo la página web es bastante planita.
Así que vamos a hacer ahora que cuando hagamos scroll en la página, conforme el elemento de la imagen se va acercando al viewport,
tenga una animación para darle un toque que nuestros usuarios se queden alucinados.
Lo primero que vamos a hacer es crear una animación que le vamos a llamar show y va a tener dos puntos.
El from, que sería el momento del 0%, donde vamos a tener la opacidad a 0 y la escala la vamos a poner al 25%.
O sea, las imágenes cuando se inician vamos a tener que sean transparentes y que sean un 25% de su tamaño.
Y vamos a finalizar esta animación donde la opacidad va a ser 1, o sea, será totalmente opaca,
o sea, que vamos a poder ver la imagen 100% sin ninguna transparencia y la escala la vamos a poner al 100%,
o sea, que el tamaño va a ocupar lo que debería ocupar.
Así que ya tenemos esta animación, Keyframes Show.
Ahora vamos con la segunda parte. Vamos a estilar las imágenes.
Lo primero que vamos a hacer es darle un nombre al View Timeline.
Este nombre, vamos a ponerle aquí Image, este nombre va a estar enlazado al scroll.
Y ahora le tenemos que decir qué eje es el que tiene que mirar el scroll.
Si tiene que ser en bloque, que sería en vertical, o sería inline, que sería horizontal.
En este caso vamos a poner View Timeline Axis y ponemos que sea en bloque, para que sea el vertical.
Ahora tenemos que hacer este enlace entre el scroll y el elemento.
Así que decimos Animation Timeline que utilice el de Image.
Fíjate que es el mismo nombre porque así se está enlazando entre el scroll y el elemento que vamos a animar.
¿Cuál es la animación que vamos a utilizar?
Animation Name y utilizamos aquí la de Show, que la hemos creado justamente antes.
Entonces, fíjate que ya ha cambiado esto y que ya está funcionando correctamente con cuatro líneas de código.
Ya está funcionando.
Pero, ¿qué problema tiene?
Pues fíjate que hasta que no llega al final no se ve la imagen al 100%.
O sea, la animación está empezando cuando el elemento empieza a aparecer al Viewport y termina cuando ya está arriba del todo.
Pero, nosotros necesitamos cambiar esto porque nos gustaría que la imagen se termine de ver mucho antes.
Si no, es un poquito molesto para el usuario que solo cuando ya está toda la imagen es que la ve.
Así que tenemos que cambiar el rango de esta animación.
Para eso vamos a utilizar Animation Range.
Y en este rango le vamos a decir, mira, vamos a hacer que la entrada, cuando empieza la animación, cuando la animación está en el 0%, es cuando el elemento en el Viewport ya está el 25% de la imagen disponible.
O sea, cuando ya el usuario está viendo el 25% de la imagen, entonces empezamos a animarla.
Y vamos a decir que cubra, o sea, que termine ya totalmente la animación cuando el elemento se esté mostrando en un 50%.
Y fíjate que con esto, ahora, mucho más rápido, estamos viendo la imagen que ya no tiene que esperar tanto.
Podemos jugar con esto, fíjate, que podemos decirle que solo cuando haya un 30% y entonces será más rápido que ya estará mostrando la animación al completo.
Ahora, fíjate que aquí hay un problemita.
¿Ves que aquí sale esto al final?
O sea, se está viendo toda la imagen, pero cuando scrolleo, vuelve a hacer la animación.
Esto queda muy raro para el usuario, que da ese parpadeo, pero también tiene arreglo.
Para arreglar esto, le tenemos que decir cuál es el modo en el que tiene que rellenar la animación.
Y tiene que ser hacia los dos sentidos.
O sea, no solo cuando vamos hacia adelante, sino también hacia atrás.
Porque si no, el problema que vamos a tener es que va a estar la animación al 100% y cuando inicie, empezará desde el 0.
Y no, queremos que vaya hacia adelante y hacia atrás.
Así que le vamos a poner Animation, Fill, Mode y le ponemos Both.
¿Vale?
Y fíjate que ahora no vamos a tener ese problema.
¿Por qué?
Porque está funcionando hacia los dos sentidos.
Entonces, ahora cuando vaya hacia atrás, lo que pasará, pues que irá como del 100%, tirará para atrás.
Y ya no tendremos ese efecto tan raro que parece que se veía y luego parpadea.
Y con esto, solo con CSS, has hecho una animación basada en el scroll para mostrar de una forma súper bonita tus imágenes.
Pero vaya, que tú aquí puedes jugar con estos keyframes lo que quieras, llevarlo al extremo que te dé la gana y darle vueltas.
Y espero y deseo que te haya gustado el vídeo.
Deja tu like si no tenías ni idea de esto y te sirve.
Y compártelo con tus amigos.