Um efeito de animação pode ser adicionado a qualquer elemento do site Zero Block . Há dois tipos de efeitos de animação: básico e avançado, ou animação passo a passo. Neste artigo, abordaremos as configurações de animação mais básicas.
As opções básicas de animação incluem:
- Animação - várias opções para quando o efeito de animação começa;
- Parallax - as configurações do efeito parallax;
- Fixação - as configurações do efeito de posicionamento fixo.
Animação
Os efeitos de animação incluem Fade In, Fade In Right, Fade In Left, Fade In Up, Fade In Down e Zoom In.
Todos os efeitos de animação têm várias configurações comuns, como Duration (Duração), Delay (Atraso) e Trigger Offset (Deslocamento do acionador).
A Duration (Duração) é a duração do efeito de animação em segundos. O valor numérico é o número de segundos em que o efeito de animação ocorrerá.
O Delay (Atraso) é o atraso em segundos antes do início do efeito de animação.
O Trigger Offset é o deslocamento em pixels da borda inferior do contêiner da janela em que a animação começa a ser reproduzida.
Ao usar efeitos de animação com elementos que aparecem na parte superior, inferior, direita ou esquerda, a opção "Distance" significa a distância percorrida pelo bloco a partir de onde ele aparece pela primeira vez.
O efeito Zoom In tem uma configuração de escala. Se for definida como menos de 100%, o elemento será ampliado para seu tamanho original. Se for definida como mais de 100%, o elemento será reduzido e parecerá menor.
A Duration (Duração) é a duração do efeito de animação em segundos. O valor numérico é o número de segundos em que o efeito de animação ocorrerá.
O Delay (Atraso) é o atraso em segundos antes do início do efeito de animação.
O Trigger Offset é o deslocamento em pixels da borda inferior do contêiner da janela em que a animação começa a ser reproduzida.
Ao usar efeitos de animação com elementos que aparecem na parte superior, inferior, direita ou esquerda, a opção "Distance" significa a distância percorrida pelo bloco a partir de onde ele aparece pela primeira vez.
O efeito Zoom In tem uma configuração de escala. Se for definida como menos de 100%, o elemento será ampliado para seu tamanho original. Se for definida como mais de 100%, o elemento será reduzido e parecerá menor.
Paralaxe
As animações de paralaxe têm duas configurações: rolagem e movimento do mouse.
Paralaxe na rolagem
Paralaxe ao mover o mouse
Nas configurações de Parallax na rolagem, localize a configuração de Velocidade. Se a velocidade for menor que 100%, um elemento se moverá mais lentamente do que a página que está sendo rolada. Se a velocidade for maior que 100%, o elemento se moverá mais rapidamente do que a página que está sendo rolada.
Nas configurações de Parallax on mouse move, a distância ao longo dos eixos X e Y significa o efeito máximo de inclinação de paralaxe.
Nas configurações de Parallax on mouse move, a distância ao longo dos eixos X e Y significa o efeito máximo de inclinação de paralaxe.
Fixação
Ao configurar uma animação de fixação, você pode escolher onde o elemento será fixado. Essa é a área da tela (a parte superior, central ou inferior da tela) na qual o efeito de fixação começa a ocorrer. Você pode escolher uma das três áreas - na parte superior da janela, no centro da janela ou na parte inferior da janela.
O deslocamento do acionador é o ponto em que um elemento será fixado em relação à parte superior da janela, ao centro da janela ou à parte inferior da janela.
A distância é a distância em pixels que o elemento deve percorrer durante a animação de fixação.
O deslocamento do acionador é o ponto em que um elemento será fixado em relação à parte superior da janela, ao centro da janela ou à parte inferior da janela.
A distância é a distância em pixels que o elemento deve percorrer durante a animação de fixação.
Recomendamos que você leia o artigo "Sticky Elements in Zero Block " para saber como criar um efeito de fixação e como ele fica em uma página.
