La siguiente es una publicación invitada de Michał Sajnóg, un desarrollador de front-end en Netguru. Michał ha creado una de esas bibliotecas de “cuando te desplazas hasta aquí, activa esta animación”. Una de las cosas que me gusta de él es que deja todo lo que pueda a CSS para crear y controlar la animación por sí mismos. Sin mencionar que ha demostrado su eficacia al funcionar bien en varios sitios de producción. Dejaré que Michał lo guíe.
¿Alguna vez ha visto esas páginas web largas en las que se aplican diferentes animaciones a medida que se desplaza hacia abajo? Me gustaría compartir con ustedes un complemento que escribí que hace que sea realmente fácil manejar todo tipo de animaciones con control total de CSS y sin problemas.
Si desea ingresar directamente, el código está en GitHub.
El problema con otras bibliotecas
En mi empresa anterior, usábamos WOW.js (u otras bibliotecas similares) para animar elementos en scroll. Para proyectos simples fue bastante agradable, pero en sitios más grandes queríamos tener más control sobre lo que realmente está sucediendo. En todas las bibliotecas populares, las animaciones fueron manejadas completamente por JavaScript insertando CSS en línea. ¡Arghgh! Los estilos en línea son malvados. Son difíciles de controlar y anular. Aunque, en algunos casos, está bien configurarlos usando JavaScript, todavía es mucho más limpio dejarlos donde pertenecen y manejar todas las cosas relacionadas con CSS dentro del archivo CSS.
Decidí crear una biblioteca que tiene un objetivo puro: detectar la posición de los elementos y luego agregar las clases apropiadas cuando aparecen en la ventana gráfica.
Controlar animaciones completamente en CSS
Quería dividir las responsabilidades con mi nueva biblioteca:
- Tener toda la lógica dentro del JavaScript.
- Tener todas las animaciones en CSS
Esto le permite agregar sus propias animaciones fácilmente y hacer cosas como cambiarlas de acuerdo con la ventana gráfica.
Cómo funciona AOS
La idea detrás de AOS es sencilla: observe todos los elementos y sus posiciones según la configuración que les proporcione. Luego agregue / elimine la clase aos-animate. Por supuesto, en la práctica, no siempre es tan fácil, pero la idea detrás de AOS es tan simple como eso. Cada aspecto de la animación es manejado por CSS.
Animaciones de ejemplo en CSS
Hay muchas animaciones diferentes listas para usar, pero crear nuevas también es simple. He aquí un ejemplo:
[aos="fade"] {
opacity: 0;
transition-property: opacity;
}
[aos="fade"].aos-animate {
opacity: 1;
}No tiene que preocuparse por la duración o el retraso. En el CSS, solo:
- agregar estilos para el atributo
aoscon el nombre de tu animación - selecciona el
transition-property(por defecto esto esall, por lo que es más eficaz y predecible si reduce la transición a las propiedades previstas) - agregue las propiedades posteriores a la transición en
.aos-animate
Cosas como duración / retraso / suavizado se configuran independientemente de la animación.
HTML de ejemplo
<div class="some-item" aos="fade">Example Element</div>o con una duración de transición diferente:
<div class="some-item" aos="fade" aos-duration="500">Example Element</div>** Consejo: ** Puedes usar data-aos en vez de aos para que su HTML se valide correctamente.
Demos en vivo
Con diferentes animaciones:
Vea Pen AOS: animaciones de Snik (@michalsnik) en CodePen.
Con el anclaje en uso:
Vea Pen AOS: ancla de Snik (@michalsnik) en CodePen.
Con colocación de ancla y diferentes facilidades:
Vea Pen AOS: anclaje y colocación de anclajes de Snik (@michalsnik) en CodePen.
Con animaciones personalizadas simples:
Vea Pen AOS: animaciones personalizadas de Snik (@michalsnik) en CodePen.
Características adicionales
- ancla – Animar un elemento según la posición de otro elemento
- colocación del ancla – Animar un elemento según su posición en la pantalla. No tiene que animarse solo cuando aparece en la ventana gráfica, sino, por ejemplo, cuando la parte inferior llega a la mitad de la pantalla.
- animaciones bidireccionales – De forma predeterminada, los elementos se animan mientras se desplaza hacia arriba y hacia abajo, pero puede obligarlo a animar solo una vez
- fácil desactivación – Deshabilite animaciones en dispositivos móviles usando opciones predefinidas como
mobile,phone,tableto con una condición / función personalizada - async consciente – Recalcula las posiciones de los elementos en los cambios de DOM, por lo que después de cargar algo usando Ajax, no tiene que preocuparse por nada (a menos que sea compatible con IE9, porque necesita un observador de mutación)
- sin dependencias – Esta biblioteca está escrita en JS puro y no depende de ninguna dependencia
AOS es completamente de código abierto, por lo que si tiene una idea interesante o algo no funciona, ¡cómo esperaría un problema abierto y nos vemos en GitHub! Cualquier contribución es muy apreciada.