Editor de Wix Studio: agregar una animación de entrada
4 min de lectura
Agregar una animación de entrada a un elemento es una excelente manera de captar la atención de los visitantes. 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 de animaciones para elegir y las puedes personalizar según las necesidades concretas de tu cliente.
![Un ejemplo de la sección en un sitio online, con cada elemento con su propia animación de entrada](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/20/08cda0fe-8d63-4b62-8182-264266262d50/3840b03b-dd9e-4675-bb32-0c42d128a960.gif)
En este artículo, obtén más información sobre lo siguiente:
Agregar una animación de entrada
Puedes agregar una animación de entrada a elementos y secciones específicos, o a la página del sitio en su totalidad.
Para agregar una animación de entrada:
- Selecciona el elemento, la sección o la página correspondiente.
- Haz clic en la flecha Abrir Inspector profesional
en la parte superior derecha del Editor.
- Haz clic en la pestaña Interacciones
.
- Haz clic en + Agregar en Entrada.
- Selecciona una animación de la lista.
Consejo: Pasa el cursor sobre las animaciones para ver una vista previa de cómo se ven. - (Opcional) Haz clic en Ajustar animación en la parte inferior para personalizar los ajustes como la dirección, el retraso o la duración.
![GIF que muestra que al pasar el cursor sobre los tipos de animación, al decidir sobre una animación, se muestra una vista previa](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/20/35efb98d-035e-4131-b105-6f877f1c7817/a5933c94-c4d2-4e15-9481-a71dda4ebc37.gif)
Personalizar una animación de entrada
Después de elegir una animación, configúrala para que se comporte tal y como quieres. Elige cuánto dura la animación, cuándo comienza, su intensidad y más.
Para personalizar una animación de entrada:
- Selecciona el elemento, la sección o la página correspondiente.
- Haz clic en la flecha Abrir Inspector profesional
en la parte superior derecha del Editor.
- Haz clic en la pestaña Interacciones
.
- Selecciona la animación que deseas cambiar.
- Haz clic en Ajustar animación para cambiar los ajustes:
- Dirección: decide de qué dirección debe provenir la animación.
Consejo: Dependiendo del tipo de animación, puedes establecer la dirección en grados (por ejemplo, 180°) o elegir una opción del menú desplegable (por ejemplo, desde la izquierda, en el sentido de las agujas del reloj). - Duración: cambia la duración de la animación.
- Retraso: establece la cantidad de tiempo entre la carga de la página y el inicio de la animación.
- Aceleración: elige qué tan gradual es la entrada o la salida de la animación.
- Dirección: decide de qué dirección debe provenir la animación.
Nota:
Las opciones de personalización disponibles dependen de la animación que elijas.
![Captura de pantalla que muestra los ajustes disponibles al personalizar una animación de entrada Revelar](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/20/4ca6fa9f-95b3-4e22-b290-9cfba81e6f06/4ab8c836-3baa-4c83-9ec8-5b31738ee563.png)
Eliminar una animación de entrada
Puedes eliminar una animación de entrada en cualquier momento desde el panel Inspector profesional.
Para eliminar una animación de entrada:
- Selecciona el elemento, la sección o la página correspondiente.
- Haz clic en la flecha Abrir Inspector profesional
en la parte superior derecha del Editor.
- Haz clic en la pestaña Interacciones
.
- Pasa el cursor sobre la animación y haz clic en el icono Más acciones
.
- Haz clic en Eliminar.
![Captura de pantalla que muestra cómo seleccionar una animación en el Inspector profesional y cómo eliminarla](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/20/baee781a-f6bd-47cc-9669-eb262748921f/8800fe3c-bb70-4e3e-bf91-23ae6e3002eb.png)
¿Te ha sido útil?
|