Editor de Wix Studio: acerca de las animaciones

4 min de lectura
Incorporar nuestras animaciones en tus diseños puede elevarlos de nivel por completo. El Editor de Wix Studio ofrece 5 tipos de animación diferentes, según cuándo quieras que aparezcan.
Haz que aparezcan animaciones cuando los visitantes pasan el cursor sobre un elemento, hacen clic o se desplazan más allá del elemento. También puedes agregar una animación de entrada, para cuando el elemento se carga por primera vez, o una que se repite continuamente en bucle, todo sin una sola línea de código.
Nota:
El tamaño de la animación se calcula de acuerdo con el navegador específico cuando la página se carga por primera vez. Si cambias el tamaño de la ventana del navegador (arrastrando las manillas), es posible que la animación no aparezca correctamente. Recomendamos actualizar la página para una visualización óptima.

Animación de entrada

Agregar una animación de entrada a un elemento es una excelente manera de atraer la atención de los visitantes. La animación se activa cuando el elemento aparece a la vista por primera vez, por lo que llama la atención al instante. Tienes muchos tipos de animaciones de entrada para elegir, y las puedes personalizar según las necesidades exactas de tu cliente.
Un ejemplo de una animación de entrada aplicada a una página completa, que la revela a medida que se carga

Interacciones al pasar el cursor y al hacer clic

Agrega efectos interesantes que aparecen cuando los visitantes pasan el cursor sobre un elemento o hacen clic en él. Puedes hacer que los elementos se transformen, se muevan o que muestren nuevo contenido al pasar el cursor o al hacer clic sobre ellos.
Elige entre una variedad de efectos prediseñados o crea un efecto personalizado según tus especificaciones exactas. Administra la sincronización, el orden y la aceleración para obtener un resultado completo, luego obtén una vista previa del resultado final directamente desde el editor.
También puedes crear interacciones entre elementos, por lo que al pasar el cursor sobre un elemento o hacer clic en él, se anima otro.
En el siguiente ejemplo, al pasar el cursor sobre el párrafo, se activa el botón y la imagen para que se muevan.
GIF que muestra cómo se ven las interacciones en un sitio online.

Animación al desplazarse

Aumenta la interacción y crea efectos interesantes con animaciones basadas en el desplazamiento. El progreso de la animación está directamente relacionado con la posición de desplazamiento, yendo hacia adelante y hacia atrás a medida que los visitantes se desplazan hacia arriba y hacia abajo. 
También puedes crear interacciones entre elementos, por lo que al desplazarse más allá de un elemento, se anima otro.
En el siguiente ejemplo, al desplazarse más allá del título, el repetidor aumenta de tamaño. 
Ejemplo de una animación de desplazamiento en un sitio online

Animación en bucle

Crea una sensación de movimiento en el diseño con animaciones que se repiten continuamente. Puedes agregar una animación en bucle a cualquier elemento que quieras que se destaque para los visitantes; algunas son más sutiles y otras son realmente llamativas. 
Ejemplo de un elemento de máscara de texto con una animación en bucle en un sitio online

Preguntas frecuentes

Selecciona una pregunta para obtener más información sobre los efectos de animación.

¿Te ha sido útil?

|