Um efeito de animação pode ser adicionado a qualquer elemento Zero Block. Existem 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 é iniciado;
- Paralaxe — as configurações do efeito de paralaxe;
- Fixação — as configurações de 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 Duração, Atraso e Deslocamento de gatilho.
A Duração é a duração do efeito de animação em segundos. O valor numérico é o número de segundos que o efeito de animação estará ocorrendo.
O Delay é o atraso em segundos antes do início do efeito de animação.
O Deslocamento de Gatilho é o deslocamento em pixels da borda inferior do Contêiner de Janela no qual a animação começa a ser reproduzida.
Ao usar efeitos de animação com elementos que aparecem de cima, de baixo, à direita ou à esquerda, a opção "Distância" significa a distância percorrida pelo bloco de onde ele aparece pela primeira vez.
O efeito Zoom In tem uma configuração de Escala. Se ele estiver definido em menos de 100%, o elemento amplia para seu tamanho original. Se estiver definido em mais de 100%, o elemento diminuirá o zoom e parecerá menor.
A Duração é a duração do efeito de animação em segundos. O valor numérico é o número de segundos que o efeito de animação estará ocorrendo.
O Delay é o atraso em segundos antes do início do efeito de animação.
O Deslocamento de Gatilho é o deslocamento em pixels da borda inferior do Contêiner de Janela no qual a animação começa a ser reproduzida.
Ao usar efeitos de animação com elementos que aparecem de cima, de baixo, à direita ou à esquerda, a opção "Distância" significa a distância percorrida pelo bloco de onde ele aparece pela primeira vez.
O efeito Zoom In tem uma configuração de Escala. Se ele estiver definido em menos de 100%, o elemento amplia para seu tamanho original. Se estiver definido em mais de 100%, o elemento diminuirá o zoom e parecerá menor.
Paralaxe
As animações de paralaxe têm duas configurações: ao rolar e mover o mouse.
Paralaxe na rolagem
Paralaxe ao mover o mouse
Nas configurações de Parallax on scroll, encontre a configuração Speed. Se a velocidade for inferior a 100%, um elemento se moverá mais lentamente do que a página que está sendo rolada. Se a velocidade for superior a 100%, o elemento se moverá mais rápido que a página que está sendo rolada.
Nas configurações de paralaxe ao mover o mouse, a distância ao longo dos eixos X e Y significa o efeito de inclinação de paralaxe máximo.
Nas configurações de paralaxe ao mover o mouse, a distância ao longo dos eixos X e Y significa o efeito de inclinação de paralaxe máximo.
Consertando
Ao configurar uma animação de correção, você pode escolher onde o elemento será corrigido. Esta é 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, na central da janela ou na parte inferior da janela.
O Trigger Offset é o ponto onde um elemento será fixado em relação ao topo da janela, centro da janela ou fundo da janela.
Distância é a distância em pixels que o elemento deve percorrer durante a animação de fixação.
O Trigger Offset é o ponto onde um elemento será fixado em relação ao topo da janela, centro da janela ou fundo da janela.
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 aprender como criar um efeito de correção e como ele se parece em uma página.
