Animaciones de movimiento para micrositios ESAP
Biblioteca de 16 movimientos
Muestra interactiva de las animaciones disponibles para Kadence Blocks. Cada pieza se puede duplicar a cualquier página del sitio y editar sin escribir código.
Un solo CSS y un solo JavaScript. Las 16 piezas se construyen con bloques Section y Advanced Text de Kadence y comparten el prefijo esap-anim. Se pausan fuera de pantalla, respetan la preferencia de movimiento reducido del dispositivo y tienen un botón de pausa para todas.
Cómo se mueven las cosas
Las cuatro bases del movimiento: transformación, secuencia, física y curvas de velocidad.
1 · Morph
Solicitar trámite
Solicitud radicada
Recibirá confirmación por correo
Una forma única cambia de tamaño y de contenido sin desaparecer. Un botón compacto se expande hasta formar una tarjeta de confirmación.
Uso sugerido: Botones de solicitud de trámites que revelan su estado.
2 · Stagger
Radicación
Asignación
Revisión
Respuesta
Cierre
Los elementos entran uno tras otro con un retraso breve. El orden de aparición guía la lectura. Se agregan filas duplicando una existente.
Uso sugerido: Listas de requisitos, pasos de un proceso y resultados de búsqueda.
3 · Spring
Solicitud aprobada
Gracias por su participación
1
La tarjeta cae, rebasa su posición y se estabiliza. La curva usa la función linear() de CSS con respaldo cubic-bezier.
Uso sugerido: Notificaciones, confirmaciones y tarjetas destacadas.
4 · Easing
Lineal
Ease in-out
Dos puntos recorren la misma distancia en el mismo tiempo. El primero mantiene velocidad constante y el segundo acelera al salir y frena al llegar.
Uso sugerido: Criterio para todas las transiciones del sitio: ease in-out en desplazamientos y cambios de tamaño.
Interfaces
Transiciones entre estados de una interfaz: sustitución de contenido, continuidad y foco.
5 · Crossfade
Un contenido se desvanece mientras el siguiente aparece en el mismo lugar. Admite cualquier número de láminas (requiere JavaScript).
Uso sugerido: Resúmenes rotativos y cambio de contenido dentro de pestañas.
6 · Shared element
Informe de gestión
Plan de acción
Matriz de riesgos
Informe de gestión
Resumen del periodo y anexos
La miniatura de la primera fila se desplaza y crece hasta convertirse en la imagen de la ficha de detalle.
Uso sugerido: Tarjetas de publicaciones, eventos o informes que abren su ficha.
7 · Magnification
Inicio
Trámites
Eventos
Ayuda
Los mosaicos crecen según su cercanía al puntero. Sin puntero, un barrido automático muestra el efecto (requiere JavaScript).
Uso sugerido: Barras de accesos rápidos en escritorio.
8 · Blur
Cobertura
92 %
Satisfacción
4,6
Metas cumplidas
87 %
Trámites
1.240
Tres indicadores se desenfocan y el cuarto crece. La atención se dirige a la cifra principal. Los valores son de ejemplo.
Uso sugerido: Tableros de indicadores y cifras destacadas.
Texto e imagen
Efectos sobre tipografía, composición e imágenes.
9 · Mask
ESAP
El texto actúa como ventana: un degradado institucional se desplaza por detrás de las letras. Cualquier título puede tomar el efecto con la clase mk-text.
Uso sugerido: Titulares de portada y cifras destacadas.
10 · Variable font
Calidad
Peso 200 a 1000 · Ancho 75 % a 125 %
Peso (200 a 1000) y ancho (75 % a 125 %) cambian de forma continua con la versión variable de Nunito Sans.
Uso sugerido: Titulares de campañas y piezas de bienvenida.
11 · Layout animation
Seis bloques cambian de tres columnas a una sola y cada uno viaja a su nueva posición con la técnica FLIP (requiere JavaScript).
Uso sugerido: Explicar el comportamiento responsivo y la reorganización de filtros.
12 · Clip path
Una imagen se revela con una ventana circular que se abre y se cierra. Para usar una foto, se inserta un bloque Imagen dentro del Section cp-img.
Uso sugerido: Imágenes de cabecera y piezas gráficas de campaña.
Datos y 3D
Gráficos que se transforman, flujos que se dibujan, profundidad y partículas.
13 · Path morph
Ene
Feb
Mar
Abr
May
El contorno escalonado de un gráfico de barras se transforma en una línea con los mismos puntos. La altura de cada barra se cambia con el control Height del Section (requiere JavaScript).
Uso sugerido: Indicadores de gestión y gráficos de tendencia.
14 · Stroke draw
Documento
Actividad
Registro
Las conexiones del flujo se dibujan y un punto de luz recorre el trayecto completo. Se agregan pasos duplicando un nodo y una línea (requiere JavaScript).
Uso sugerido: Procesos documentales como Documento, Actividad y Registro.
15 · Perspective
1
2
3
4
5
Las tarjetas se abren en abanico tridimensional con perspectiva y regresan a una pila. El abanico se ajusta al número de tarjetas (requiere JavaScript).
Uso sugerido: Portafolios, galerías de servicios y selección de opciones.
16 · Particles
ESAP
Puntos dispersos se agrupan, forman las letras del título y se dispersan de nuevo. El texto del título se cambia desde el editor (requiere JavaScript).
Uso sugerido: Portadas y pantallas de bienvenida.
