Editor de Wix Studio: agregar una animación de desplazamiento
4 min de lectura
Agrega animaciones de desplazamiento para que la experiencia de navegación sea más atractiva y memorable. La manera en la que se ejecuta la animación está directamente vinculada a la posición de desplazamiento, al revelar o transformar un elemento a medida que los visitantes se desplazan hacia arriba y hacia abajo.
En este artículo, obtén más información sobre lo siguiente:
Agregar una animación de desplazamiento
Para agregar una nueva animación de desplazamiento, selecciona el elemento que la activa. La animación que elijas comienza cuando los visitantes se desplazan más allá de este elemento. Luego, decide qué elemento se anima y selecciona una dirección para la animación.
Para agregar una animación de desplazamiento:
- Selecciona el elemento o la sección 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 debajo de Desplazarse.
- Configura la animación:
- Elige qué elemento muestra la animación en Elemento animado.
- Selecciona una opción en Dirección de la animación para decidir cómo comienza la animación, en referencia al elemento que diseñaste. Puedes hacer que el diseño en el lienzo sea el punto de inicio (Desde su diseño) o el punto final (Hasta su diseño).
- Selecciona una de las animaciones de la lista.
Consejo: Pasa el cursor sobre las animaciones para ver una vista previa de su comportamiento.
Personalizar una animación de desplazamiento
Después de elegir una animación, configúrala para que se comporte como quieras. Los ajustes disponibles dependen de la animación específica que elijas.
Para personalizar una animación de desplazamiento:
- Selecciona el elemento o la sección 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 sus ajustes:
- Dirección: elige la dirección de la que debe provenir la animación (por ejemplo, desde la izquierda, desde arriba).
- Escalar: establece el tamaño objetivo para el elemento en la animación. Por ejemplo, 80% significa que el elemento se reduce un 20% en la animación.
- Distancia: decide qué tan lejos se mueve el elemento en esta animación.
- Área de la animación: decide en qué punto durante el desplazamiento comienza y se detiene la animación. 0% es la parte inferior de la pantalla y 100% es la parte superior. Por ejemplo, si configuras el área al 100%, la animación comienza cuando el elemento está en la parte inferior y termina cuando llega a la parte superior.
Consejo:
Activa la palanca Desplazarse para previsualizar para ver la animación que estás creando, directamente en el lienzo.
Eliminar una animación de desplazamiento
Puedes eliminar una animación de desplazamiento en cualquier momento desde el Inspector profesional.
Para eliminar una animación de desplazamiento:
- Selecciona el elemento o la sección 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.
¿Te ha sido útil?
|