Película animada
Los bloques se mueven de diversas maneras dependiendo de la posición de desplazamiento y del tiempo, lo que proporciona un efecto que enfatiza el contenido.
Agregar animación
Haz clic en el menú de animación que se encuentra en el lado derecho de la pantalla de edición.
Coloca el cursor sobre el bloque deseado, haz clic en Agregar animación y, a continuación, selecciona la animación deseada.
Los bloques con animaciones aplicadas aparecen con un fondo verde, como se muestra en la imagen. Si desactivas y vuelves a activar la opción de vista previa en el lado derecho de la pantalla, podrás previsualizar la animación sin cambiar al modo de visualización.
Si quieres aplicar la misma animación a varios bloques a la vez, prueba a usar la función de copiar estilo.
Copiar estilo: Cmd (Ctrl) + Opción (Alt) + C
Estilo de pegado: Cmd (Ctrl) + Opción (Alt) + V
Tipos de animación
Se dividen en tres categorías principales según el desencadenante (la acción necesaria para iniciar la animación), y a cada desencadenante se le pueden aplicar diferentes animaciones. Veamos qué tipo de efecto produce cada una mediante los ejemplos que aparecen debajo de cada nombre.
Entrada
La animación comienza en cuanto el bloque se muestra en la pantalla y se ejecuta solo durante un tiempo preestablecido, independientemente de la posición de desplazamiento.
Deslizar
Configuración del botón: Retardo 0,3 | Duración 0,5 | Distancia 50 | Dirección Arriba | Animación CubicBezier
Configuración de imagen: Retardo 0,6 | Duración 0,5 | Distancia 50 | Dirección Arriba | Animación CubicBezier
Configuración de imagen: Retardo 0,6 | Duración 0,5 | Distancia 50 | Dirección Arriba | Animación CubicBezier
Encadenar
Configuración de botones: Retardo 0 | Duración 1 | Bézier cúbico
Configuración de imagen: Retardo 0,3 | Duración 1 | Bézier cúbico
Configuración de imagen: Retardo 0,3 | Duración 1 | Bézier cúbico
Escala en
Configuración del botón: Retardo 0 | Duración 0,8 | Animación CubicBezier
Configuración de imagen: Retardo 0 | Duración 0,8 | Animación CubicBezier
Configuración de imagen: Retardo 0 | Duración 0,8 | Animación CubicBezier
Voluta
Mientras se desplaza hacia abajo, la animación se reproduce de forma continua a lo largo de la posición de desplazamiento, desde que el bloque comienza a aparecer en la pantalla hasta que deja de ser visible.
Paralaje
Configuración de botones: Distancia 150 | Dirección izquierda | Desbordamiento visible
Configuración de imagen: Distancia 150 | Dirección derecha | Desbordamiento visible
Configuración de imagen: Distancia 150 | Dirección derecha | Desbordamiento visible
Encadenar
Configuración del botón: Ninguna
Configuración de imagen: Ninguna
Configuración de imagen: Ninguna
Desaparecer
Configuración del botón: Ninguna
Configuración de imagen: Ninguna
Configuración de imagen: Ninguna
Escala en
Configuración del botón: Dirección central
Configuración de la imagen: Dirección inferior
Configuración de la imagen: Dirección inferior
Repetición infinita (Infinito)
La animación comienza en cuanto accedes al sitio y continúa reproduciéndose independientemente de la posición de desplazamiento.
Aliento
Configuración de botones: Distancia 10 | Duración 2 | Dirección Centro | Desbordamiento visible
Configuración de imagen: Distancia 50 | Duración 4 | Ancho de dirección | Desbordamiento visible
Configuración de imagen: Distancia 50 | Duración 4 | Ancho de dirección | Desbordamiento visible
Deslizar
Varias imágenes se muestran horizontalmente. Esta función solo se puede aplicar al bloque de carrusel de imágenes.
Valor de configuración: Velocidad 2 | Pausa al pasar el ratón por encima Activado
