Puede añadirse un efecto de animación a cualquier elemento de Zero Block . Existen dos tipos de efectos de animación: básicos y avanzados, o animación paso a paso. En este artículo, cubriremos los ajustes de animación más básicos.
Las opciones básicas de animación incluyen:
- Animación-varias opciones para cuando comienza el efecto de animación;
- Parallax: la configuración del efecto de paralaje;
- Fijación de los ajustes del efecto de posicionamiento fijo.
Animación
Los efectos de animación incluyen Fundido de entrada, Fundido de entrada a la derecha, Fundido de entrada a la izquierda, Fundido de entrada hacia arriba, Fundido de entrada hacia abajo y Zoom.
Todos los efectos de animación tienen una serie de ajustes comunes como la Duración, el Retardo y el Desplazamiento del Disparador.
La Duración es la duración del efecto de animación en segundos. El valor numérico es el número de segundos que durará el efecto de animación.
El Retardo es el retardo en segundos antes del inicio del efecto de animación.
El Desplazamiento de activación es el desplazamiento en píxeles desde el borde inferior del Contenedor de la ventana en el que la animación comienza a reproducirse.
Cuando se utilizan efectos de animación con elementos que aparecen desde arriba, abajo, a la derecha o a la izquierda, la opción "Distancia" significa la distancia recorrida por el bloque desde donde aparece por primera vez.
El efecto Acercar tiene un ajuste de Escala. Si es inferior al 100%, el elemento vuelve a su tamaño original. Si es superior al 100%, el elemento se aleja y aparece más pequeño.
La Duración es la duración del efecto de animación en segundos. El valor numérico es el número de segundos que durará el efecto de animación.
El Retardo es el retardo en segundos antes del inicio del efecto de animación.
El Desplazamiento de activación es el desplazamiento en píxeles desde el borde inferior del Contenedor de la ventana en el que la animación comienza a reproducirse.
Cuando se utilizan efectos de animación con elementos que aparecen desde arriba, abajo, a la derecha o a la izquierda, la opción "Distancia" significa la distancia recorrida por el bloque desde donde aparece por primera vez.
El efecto Acercar tiene un ajuste de Escala. Si es inferior al 100%, el elemento vuelve a su tamaño original. Si es superior al 100%, el elemento se aleja y aparece más pequeño.
Parallax
Las animaciones de paralaje tienen dos ajustes: desplazamiento y movimiento del ratón.
Parallax en desplazamiento
Parallax al mover el ratón
En la configuración de Parallax en desplazamiento, busque la configuración de Velocidad. Si la velocidad es inferior al 100%, el elemento se moverá más despacio que la página por la que se desplaza. Si la velocidad es superior al 100%, el elemento se moverá más rápido que la página que se está desplazando.
En la configuración de Parallax on mouse move, la distancia a lo largo de los ejes X e Y significa el efecto de inclinación de paralaje máximo.
En la configuración de Parallax on mouse move, la distancia a lo largo de los ejes X e Y significa el efecto de inclinación de paralaje máximo.
Fijación de
Al configurar una animación de fijación, puede elegir dónde se fijará el elemento. Esta es el área de la pantalla (la parte superior, central o inferior de la pantalla) en la que el efecto de fijación comienza a tener lugar. Puede elegir una de las tres áreas: en la parte superior de la ventana, en el centro de la ventana o en la parte inferior de la ventana.
El desplazamiento de activación es el punto en el que se fijará un elemento en relación con la parte superior de la ventana, el centro de la ventana o la parte inferior de la ventana.
La distancia es la distancia en píxeles que debe recorrer el elemento durante la animación de fijación.
El desplazamiento de activación es el punto en el que se fijará un elemento en relación con la parte superior de la ventana, el centro de la ventana o la parte inferior de la ventana.
La distancia es la distancia en píxeles que debe recorrer el elemento durante la animación de fijación.
Le recomendamos que lea el artículo "Elementos de fijación en Zero Block " para aprender a crear un efecto de fijación y qué aspecto tiene en una página.
