Editor Wix: adicionar e personalizar uma animação
4 min de leitura
Use animações para dar vida ao seu site. Adicione efeitos como "Flutuar" e "Expandir" para criar páginas criativas e impressionantes. Você pode escolher como e quando suas animações são reproduzidas: apenas uma vez, na rolagem, em loop e muito mais.
Você pode aplicar animações a vários elementos e até mesmo aplicar efeitos diferentes ao mesmo elemento no seu site para desktop e mobile. Nossas animações para mobile foram projetadas para caber em telas menores, para que você possa impressionar seus visitantes em qualquer dispositivo.
Neste artigo confira como:
Problemas com suas animações?
Siga nossas etapas para garantir que elas estejam funcionando como esperado no seu site online.
Adicionar animação a um elemento
Torne seu site dinâmico e envolvente ao adicionar uma animação aos seus elementos. Cada animação tem seu próprio efeito diferente, para que você possa misturá-las com elementos diferentes e passar uma impressão permanente nos seus visitantes.
Dica:
Você pode adicionar animação a um grupo de elementos ao selecionar o grupo e clicar no ícone Animação 
.
.Para adicionar uma animação:
- Clique no elemento relevante no seu editor.
- Clique no ícone Animação .
- Selecione uma animação entre as opções disponíveis.
- Entrada: a animação só é reproduzida uma vez quando o elemento selecionado aparece na tela.
- Loop: a animação é reproduzida continuamente.
- Rolar: a animação é reproduzida quando o elemento e visualizado durante a rolagem.
Observação:
Os elementos no seu cabeçalho serão animados apenas uma vez, durante a primeira visita à página.
Personalizar uma animação
Após adicionar animação a um elemento, você pode personalizá-lo para que ele se comporte da maneira que você deseja e combine com o seu site.
Ajuste configurações como poder, direção e atraso para causar um impacto e engajar seus visitantes.
Observação:
As opções de personalização disponíveis dependem da animação que você escolher.
Para personalizar a animação:
- Clique no elemento relevante no seu editor.
- Clique no ícone Animação .
- Clique em Personalizar e use as opções para ajustar sua animação:
- Poder: clique no menu dropdown para selecionar a potência da animação quando é reproduzida.
- Direção: selecione de qual direção a animação entra (por exemplo: do canto inferior esquerdo, da direita).
- Distância: use o slider para alterar a distância entre o ponto inicial e final do efeito.
- Duração: use o slider para ajustar por quanto tempo você deseja que a animação seja reproduzida.
- Atraso: use o slider para aumentar ou diminuir o atraso entre o carregamento da página e o início da animação.
- Tipo de animação: escolha um tipo de animação entre dentro, fora ou contínua ao rolar.
- Estilo de movimento: selecione a intensidade do movimento, como suave ou moderado.
Adicionar animações ao seu site mobile
Além de adicionar animação a elementos no seu site para desktop, você também pode adicioná-los ao seu site mobile, para que seus visitantes tenham uma ótima experiência de navegação em todos os seus dispositivos.
As animações para dispositivos móveis foram criadas especificamente para resoluções e tamanhos de tela menores, então você não precisa se preocupar com espaçamento.
Observação:
Os efeitos de animação adicionados no desktop não são transferidos para o seu site mobile, pois são otimizados para diferentes tamanhos de tela. Se você quiser que um elemento seja animado no mobile também, siga os passos abaixo.
Para adicionar animação no mobile:
- Vá para o seu editor mobile.
- Clique no elemento relevante.
- Clique no ícone Animação .
- Selecione uma animação entre as opções disponíveis.
Observação importante sobre o Velo:
Se você estiver usando o Velo (código) para ocultar ou mostrar um elemento, sua animação também precisa ser definida no Velo.
Esse artigo foi útil?
|