Editor de Wix Studio: agregar una animación de desplazamiento
7 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.
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).
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 un tipo de animación (Entrada o Salida).
Para agregar 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
. - 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.
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 el icono Abrir Inspector profesional en la parte superior derecha del editor.
- Haz clic en la pestaña Animaciones y efectos .
- 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.
Configurar el área de la animación de desplazamiento
Decide en qué punto, mientras te desplazas, comienza y se detiene la animación. El 0% representa la parte inferior de la pantalla y el 100% la parte superior.
Por ejemplo, si estableces el área en 0%-50%, la animación comienza cuando el elemento está en la parte inferior de la pantalla y se detiene cuando llega a la mitad.
Para establecer el área de la 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 .
- Selecciona la animación que deseas cambiar.
- Haz clic en Ajustar animación.
- Arrastra los puntos debajo de Área de la animación para establecer cuándo comienza y termina.
Consejo: Puedes hacer clic en los puntos para ingresar el porcentaje manualmente.
Prueba el área de animación:
Cuando la palanca Desplazarse para previsualizar está habilitada, aparece una indicación en el control deslizante Área de la animación para que puedas comprender mejor la parte exacta de la pantalla donde aparecería la animación.
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 una animación de desplazamiento no se produce cuando quieres, hay dos propiedades que debes tener en cuenta: la Dirección de la animación y el Área de la animación. Sigue los pasos descritos en este tutorial en video para averiguar qué está causando el retraso y cómo solucionarlo (contenido en inglés).
(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.
¿Te ha sido útil?
|