Editor de Wix Harmony: agregar y personalizar una animación
4 min
En este artículo
- Agregar animación a un elemento
- Personalizar una animación
- Agregar animaciones al sitio móvil
Dale vida a tu sitio con animaciones que aportan movimiento y dinamismo al diseño. Elige entre opciones como efectos de entrada, de desplazamiento, de bucle o de efectos del cursor, según el momento en que deba aparecer la animación.
Personaliza cada animación para crear el aspecto exacto que deseas. Personaliza ajustes como la distancia, la duración y el retraso para que coincidan con tu visión. Todas las animaciones móviles están diseñadas para pantallas más pequeñas, lo que garantiza que tu sitio se ves impresionante en cualquier dispositivo.
¿Sabías lo siguiente?
Puedes aplicar diferentes animaciones y efectos al mismo elemento.
Agregar animación a un elemento
Agrega movimiento y energía a tu sitio aplicando animaciones a los elementos. Elige entre una variedad de efectos para darle vida a cada parte de la página y crear una experiencia que los visitantes recordarán.
Para agregar una animación:
- Ve al editor.
- Haz clic en el elemento correspondiente.
- Haz clic en el icono Animación
en la barra de acciones. - Selecciona una animación de las opciones disponibles.
- Entrada: la animación introduce un elemento en la pantalla; solo se reproduce una vez, cuando el elemento aparece por primera vez.
- Bucle: la animación se reproduce en un bucle continuo.
- Desplazar: la animación se reproduce cuando un visitante se acerca al elemento mientras se desplaza hacia arriba y hacia abajo por la página.
- Efectos del cursor: la animación comienza a moverse cuando el cursor del visitante pasa sobre el elemento.
Nota:
Los elementos del encabezado se animarán solo una vez, durante la primera visita a la página.
Personalizar una animación
Una vez que hayas agregado una animación a un elemento, personalízala para que combine con el estilo del sitio. Se pueden ajustar opciones como la intensidad, la dirección y el retraso para crear el efecto exacto que buscas y mejorar la interacción de la audiencia.
Nota:
Las opciones de personalización disponibles dependen de la animación que elijas.
Para personalizar la animación:
- Ve al editor.
- Selecciona el elemento correspondiente.
- Haz clic en el icono Animación en la barra de acciones.
- (Si aún no lo has hecho) Selecciona una animación de las opciones disponibles.
- Haz clic en Personalizar para ajustar la animación elegida:
- Fuerza: haz clic en el menú desplegable para seleccionar qué tan potente es la animación cuando se reproduce.
- Dirección: selecciona desde qué dirección entra la animación (por ejemplo, en el sentido de las agujas del reloj, desde la derecha).
- Distancia: usa el control deslizante para cambiar la distancia entre el punto de inicio y el punto final del efecto.
- Duración: arrastra la barra para ajustar la cantidad de tiempo que deseas que se reproduzca la animación.
- Retraso: arrastra el control deslizante para aumentar o disminuir el retraso entre la carga de la página y el comienzo de la animación.
- Velocidad: arrastra el control deslizante para cambiar la velocidad del efecto; cuanto menor sea el número, más rápido será el efecto.
- Eje de movimiento: determina si el elemento se mueve horizontalmente, verticalmente o en ambos ejes.
- Tipo de animación: elige entre el tipo de animación de entrada, de salida o continuo.
- Pivote: elige el punto de referencia desde el que el elemento comienza a moverse.
- Estilo de movimiento: selecciona la intensidad del movimiento, como suave o moderado.
Agregar animaciones al sitio móvil
Puedes agregar animaciones a la versión móvil de tu sitio, al igual que en la versión de escritorio, para que los visitantes disfruten de una experiencia atractiva en cualquier dispositivo. Las animaciones móviles están diseñadas especialmente para pantallas y resoluciones más pequeñas, por lo que todo se adapta a la perfección sin necesidad de realizar esfuerzos adicionales.
Nota:
Las animaciones que agregues en la versión de escritorio también aparecerán en la versión móvil de tu sitio, pero puedes elegir una animación diferente para la versión móvil (o desactivarla) sin cambiar la animación de la versión de escritorio.
Para agregar animación en la versión móvil:
- Ve al editor.
- Haz clic en el icono Móvil
en la esquina superior derecha de la página. - Haz clic en el elemento correspondiente.
- Haz clic en el icono Animación
en la barra de acciones. - Selecciona una animación de las opciones disponibles.
