header-logo
Primeros pasosAprende cómo puedes usar Wix para construir tu sitio web y potenciar tu negocio. Personaliza tu sitio o contrata a un profesional para crear o mejorar tu presencia online.
Crear tu sitioAprende a utilizar el Editor de Wix y a gestionar el contenido de tu sitio. Descubre cómo proteger la privacidad de tus visitantes y hacer que tu sitio sea accesible.
Cuenta y facturaciónRevisa la configuración de tu cuenta, gestiona tus suscripciones y planes Premium y comprende tus facturas.
Usar las apps móviles de WixUtiliza la aplicación Wix para gestionar tu negocio de manera eficiente, interactuar con tus visitantes y construir una comunidad.
Conectar un dominioComprende cómo comprar, conectar o transferir un dominio y cómo mantener seguros los datos de tu sitio.
Administrar tu negocioEncuentra las herramientas adecuadas para construir y hacer crecer tu negocio: acepta pagos, revisa las analíticas, contacta con los visitantes y mucho más.
Promocionar tu sitioAprende cómo promocionar tu sitio en los motores de búsqueda, enviar campañas de email y ejecutar anuncios pagados.
Wix Studio, Partners y EnterpriseAprovecha al máximo tu cuenta de Wix Studio, de Partner o de Enterprise para poder escalar tu negocio.
Obtener ayudaObtén más información sobre cómo resolver problemas de rendimiento y cuestiones técnicas en tu sitio. Mantente al tanto de las próximas funciones a través de nuestra hoja de ruta.
placeholder-preview-image
Wix LearnMejora tus habilidades con nuestros cursos y tutoriales.
Blog de WixObtén consejos para diseño web, marketing y mucho más.
Guía de SEOMejora el tráfico orgánico en buscadores.
Website developmentCrea un sitio con nuestra plataforma full-stack.
Contrata a un profesionalVincúlate con un especialista que te ayude a alcanzar tus objetivos
placeholder-preview-image
En este artículo
  • Animación de entrada
  • Interacciones al pasar el cursor y al hacer clic
  • Animación al desplazarse
  • Animación en bucle
  • Efectos WebGL para fondos multimedia
  • Preguntas frecuentes

Editor de Wix Studio: acerca de las animaciones

En este artículo
  • Animación de entrada
  • Interacciones al pasar el cursor y al hacer clic
  • Animación al desplazarse
  • Animación en bucle
  • Efectos WebGL para fondos multimedia
  • Preguntas frecuentes
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 hacia él. La animación aparece cuando el elemento entra a la vista por primera vez, por lo que llama la atención al instante. Hay muchos tipos para elegir y 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 con tus especificaciones exactas. Administra la sincronización, el orden y la aceleración para ligarlo todo y 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, avanza y retrocede 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 tu diseño con animaciones que se repiten continuamente. Puedes agregar una animación en bucle a cualquier elemento al que quieras que los visitantes le presten atención. 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

Efectos WebGL para fondos multimedia

Transforma los proyectos de tus clientes con nuestros efectos WebGL, diseñados para convertir los fondos de los archivos multimedia en algo llamativo. Estos efectos involucran a los visitantes del sitio y garantizan un rendimiento óptimo. Elige entre una variedad de impresionantes preajustes, modifica sus propiedades y decide cómo se activan: automáticamente al desplazarse o con el movimiento del ratón del visitante. 
GIF que muestra un sitio online con animaciones WebGL en el fondo de varias secciones.

Preguntas frecuentes

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

Helpmate

Hola

¿Necesitas más ayuda?
Unlock personalized helpLog in to get the most out of Helpmate.