El sistema de construcción visual de OZ CMS incluye un apartado completo de animaciones aplicables a cualquier widget o contenedor dentro del sitio. Estas animaciones permiten controlar de forma precisa cómo y cuándo aparece un elemento, lo cual puede aportar fluidez visual y guía en la navegación del usuario. Este tutorial explica paso a paso cómo se utilizan, dónde se activan y cómo personalizar su comportamiento desde el editor.
Cómo acceder a las opciones de animación
Para aplicar una animación en OZ CMS, primero debes seleccionar el elemento al que deseas asignársela. Esto puede ser un widget (como un bloque de texto, una imagen, un botón, etc.) o un contenedor completo. Una vez seleccionado el elemento, aparecerá el menú lateral de configuración. Dentro de ese panel, desplázate hasta encontrar la sección llamada “Animación”.
Allí podrás desplegar un menú con todas las opciones disponibles para animación y personalización de su comportamiento.
Tipos de animación disponibles
OZ CMS incluye un listado de animaciones prediseñadas que se pueden aplicar directamente con un solo clic. Estas animaciones afectan la forma en que el elemento entra en pantalla, ya sea mediante desplazamientos, efectos de opacidad, rebotes o rotaciones. Los efectos disponibles incluyen:
Encadenar
Golpe de zoom
Rebotar
Llegar
Girar
Fundido desde la izquierda
Fundido desde la derecha
Fundido desde arriba
Fundido desde abajo
Voltear vertical
Voltear horizontal
Rebote desde la cima
Rebote desde la izquierda
Rebote desde la derecha
Rebote desde abajo
Inclinación desde la izquierda
Girar en varias direcciones
Deslizamiento hacia abajo
Deslizamiento hacia la derecha
Deslizamiento hacia la izquierda
Deslizamiento hacia arriba
Estas animaciones se pueden aplicar individualmente por widget o a contenedores completos que agrupan múltiples elementos.
Personalización de velocidad y retardo
Una vez seleccionada la animación, es posible ajustar dos variables que determinan su comportamiento:
Velocidad de animación (Animation Speed):
Controla el tiempo que tarda la animación en ejecutarse completamente, desde que comienza hasta que el elemento alcanza su posición final. Se mide en milisegundos y puede configurarse entre 100 ms y 5000 ms.
Ejemplo práctico:
Si colocas un delay de 1000 ms en un botón, este aparecerá 1 segundo después de que el visitante vea esa parte de la página.
Ambas opciones están disponibles en la misma sección de “Animación”, justo debajo del selector de tipo de animación.
Combinación de animaciones
Puedes aplicar animaciones distintas a múltiples widgets dentro del mismo contenedor, y escalonar los retardos para lograr efectos sincronizados. Por ejemplo:
Imagen: Fundido desde arriba, delay de 0 ms
Título: Fundido desde la izquierda, delay de 300 ms
Botón: Rebotar desde abajo, delay de 600 ms
Este patrón da una sensación de entrada fluida y profesional, especialmente útil en secciones “hero” o bloques promocionales.
Recomendaciones generales de uso
Evita sobrecargar: aunque puedes animar todos los elementos, es recomendable usar las animaciones con moderación para evitar saturar la experiencia del usuario.
Combina con contenido importante: reserva animaciones para llamados a la acción, titulares o secciones que deseas destacar visualmente.
Prueba la experiencia móvil: asegúrate de que los efectos aplicados no dificulten la navegación en dispositivos móviles, donde la velocidad de conexión y el tamaño de pantalla pueden afectar la percepción.
Conclusión
Las opciones de animación en OZ CMS ofrecen una capa adicional de personalización visual que puede mejorar la interacción del usuario y reforzar el contenido. Están disponibles directamente en el panel de configuración de cada elemento, no requieren programación, y pueden ser configuradas en segundos. Su uso adecuado puede aportar claridad, dinamismo y una mejor experiencia general de navegación.