Se puede añadir un efecto de animación a cualquier elemento de Zero Block. Hay dos tipos de efectos de animación: básicos y avanzados, o animación paso a paso. En este artículo, cubriremos las configuraciones de animación más básicas.
Las opciones básicas de animación incluyen:
- Animación: varias opciones para cuando se inicia el efecto de animación;
- Parallax: la configuración del efecto de paralaje;
- Fijación: la configuración del efecto de posicionamiento fijo.
Animación
Los efectos de animación incluyen Fade In, Fade In Right, Fade In Left, Fade In Up, Fade In Down y Zoom In .
Todos los efectos de animación tienen una serie de configuraciones comunes, como Duración, Retraso y Desplazamiento de desencadenador.
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 tendrá lugar el efecto de animación.
El retraso es el retraso en segundos antes del inicio del efecto de animación.
El desplazamiento de desencadenador es el desplazamiento en píxeles del borde inferior del contenedor de ventanas en el que comienza a reproducirse la animación.
Cuando se utilizan efectos de animación con elementos que aparecen desde la parte superior, inferior, derecha o 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 se establece en menos del 100%, el elemento se acerca a su tamaño original. Si se establece en más del 100%, el elemento se aleja y parece 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 tendrá lugar el efecto de animación.
El retraso es el retraso en segundos antes del inicio del efecto de animación.
El desplazamiento de desencadenador es el desplazamiento en píxeles del borde inferior del contenedor de ventanas en el que comienza a reproducirse la animación.
Cuando se utilizan efectos de animación con elementos que aparecen desde la parte superior, inferior, derecha o 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 se establece en menos del 100%, el elemento se acerca a su tamaño original. Si se establece en más del 100%, el elemento se aleja y parece más pequeño.
Paralaje
Las animaciones de paralaje tienen dos configuraciones: desplazamiento y movimiento del mouse.
Paralaje en desplazamiento
Parallax al mover el mouse
En la configuración de Parallax on scroll, busque la configuración de Velocidad. Si la velocidad es inferior al 100 %, un elemento se moverá más lentamente que la página que se está desplazando. 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 en el movimiento del mouse, 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 en el movimiento del mouse, la distancia a lo largo de los ejes X e Y significa el efecto de inclinación de paralaje máximo.
Fijación
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 comienza a tener lugar el efecto de fijación. 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 un elemento se fijará 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 el elemento debe cubrir durante la animación de fijación.
El desplazamiento de activación es el punto en el que un elemento se fijará 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 el elemento debe cubrir durante la animación de fijación.
Le recomendamos que lea el artículo "Sticky Elements in Zero Block" para aprender cómo crear un efecto de fijación y cómo se ve en una página.
