Editor de Wix Studio: agregar una animación de desplazamiento
6 min
En este artículo
- Agregar una animación de desplazamiento
- Personalizar una animación de desplazamiento
- Eliminar una animación de desplazamiento
- Solucionar problemas de animaciones con desplazamiento
- El efecto de desplazamiento aparece demasiado tarde
- (Solo para dispositivos móviles) El efecto de desplazamiento no aparece en el modo horizontal
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.
Consejo:
Echa un vistazo a nuestro curso de la Academia de Wix Studio y obtén más información sobre cómo agregar animaciones e interacciones (contenido en inglés).
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 un tipo de animación (Entrada o Salida).
Para agregar una animación de desplazamiento:
- Selecciona el elemento correspondiente.
- Haz clic en el icono Abrir Inspector profesional
en la parte superior derecha del editor.
- Haz clic en la pestaña Animaciones y efectos
. - 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 Tipo de animación para decidir si el elemento se anima hacia adentro o hacia afuera:
- Entrada: el punto final de la animación es el diseño actual en el lienzo (por ejemplo, el elemento se funde a medida que te desplazas hacia abajo).
- Salida: el punto de partida de la animación es el diseño actual en el lienzo (por ejemplo, el elemento se desvanece a medida que te desplazas hacia abajo)
- Selecciona una animación de la lista.
Consejo: Pasa el cursor sobre las animaciones para obtener una vista previa de su aspecto.
Notas:
- No es posible establecer un elemento anclado como disparador, ya que siempre permanece en la misma posición (en relación con la ventana de visualización del visitante).
- Asegúrate de que haya suficiente espacio en la página para que la animación de desplazamiento se muestre correctamente. Por ejemplo, si el elemento está ubicado en la primera o en la última mitad de la página, es posible que no veas la animación de desplazamiento.
¿Buscas desplazamiento horizontal?
Si bien las opciones del Inspector profesional se aplican al desplazamiento vertical, puedes seguir nuestro tutorial de Wix Academy para crear un efecto de desplazamiento horizontal llamativo.
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 correspondiente.
- Haz clic en el icono Abrir Inspector profesional en la parte superior derecha del editor.
- Haz clic en la pestaña Animaciones y efectos .
- Haz clic en la animación de desplazamiento 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 del 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 entre 0% y 50%, la animación comienza cuando el elemento se encuentra en la parte inferior de la pantalla y se detiene cuando llega a la mitad.
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 el icono Abrir Inspector profesional en la parte superior derecha del editor.
- Haz clic en la pestaña Animaciones y efectos .
- Pasa el cursor sobre la animación y haz clic en el icono Más acciones
. - Haz clic en Eliminar.
Solucionar problemas de animaciones con desplazamiento
El efecto de desplazamiento aparece demasiado tarde
Si la animación de desplazamiento comienza demasiado tarde o no se comporta como era de esperar, puedes modificar los ajustes de Tipo de animación (Entrada o Salida) y Área de la animación para solucionar el problema.
Mira el tutorial en video para averiguar qué está causando el retraso y cómo solucionarlo.
(Solo para dispositivos móviles) El efecto de desplazamiento no aparece en el modo horizontal
Al ver el sitio de tu cliente en un dispositivo móvil, la animación de desplazamiento puede dejar de funcionar si el visitante gira la pantalla en medio de la navegación. En otras palabras, si voltea el teléfono a la posición horizontal (modo horizontal) mientras se desplaza por la página, la animación de desplazamiento no aparecerá.
Para resolver esto, los visitantes pueden actualizar la página en modo horizontal; esto "reiniciará" la animación.