Editor do Wix Studio: sobre animações
5 min
Neste artigo
- Animação de entrada
- Interações de hover e clique
- Animação de rolagem
- Animação em loop
- Efeitos WebGL para backgrounds de mídia
- Perguntas frequentes
Incorporar nossas animações em seus designs pode levá-los a um novo patamar. O Editor do Wix Studio oferece 5 tipos diferentes de animação, com base em quando você deseja que ela apareça.
Faça animações aparecerem quando os visitantes passam o mouse, clicam ou passam por um elemento. Você também pode adicionar uma animação de entrada, para quando o elemento é carregado pela primeira vez ou uma que se repete continuamente, tudo sem uma única linha de código.
Observação:
O tamanho da animação é calculado de acordo com o seu navegador específico quando a página é carregada pela primeira vez. Se você redimensionar a janela do navegador (ao arrastar suas alças), a animação pode não aparecer corretamente. Recomendamos atualizar a página para uma exibição ideal.
Animação de entrada
Adicionar uma animação de entrada a um elemento é uma ótima maneira de chamar a atenção dos visitantes para ele. A animação aparece quando o elemento aparece pela primeira vez, então chama a atenção instantaneamente. Existem muitos tipos para você escolher e personalizar de acordo com a demanda do seu cliente.
Interações de hover e clique
Adicione efeitos interessantes que aparecem quando os visitantes passam o mouse (hover) ou clicam em um elemento. Você pode fazer com que os elementos se transformem, se movam ou revelem um novo conteúdo ao passar o mouse/clicar.
Escolha entre uma variedade de efeitos predefinidos, ou crie um efeito personalizado com suas especificações exatas. Gerencie o tempo, a ordem e a translação e, em seguida, visualize o resultado final diretamente no Editor.
Você também pode criar interações entre elementos. Assim, passar o mouse ou clicar em um elemento ativa a animação em outro.
No exemplo abaixo, passar o mouse sobre o parágrafo faz com que o botão e a imagem se movam.
Animação de rolagem
Aumente o engajamento e crie efeitos interessantes com animações de rolagem. O progresso da animação está diretamente relacionado à posição de rolagem, indo para frente e para trás enquanto os visitantes rolam para cima e para baixo.
Você também pode criar interações entre elementos. Assim, rolar por um elemento ativa a animação em outro.
No exemplo abaixo, rolar pelo título faz com que o repetidor aumente.
Animação em loop
Crie uma sensação de movimento em seu design com animações que se repetem continuamente. Você pode adicionar uma animação em loop a qualquer elemento que deseja que atrair a atenção dos visitantes. Algumas são mais sutis e outras chamam mais atenção.
Efeitos WebGL para backgrounds de mídia
Transforme os projetos dos seus clientes com nossos efeitos WebGL, criados para tornar backgrounds de mídia mais chamativos. Esses efeitos atraem os visitantes do site e, ao mesmo tempo, garantem o desempenho ideal. Escolha entre uma variedade de predefinições incríveis, ajuste suas propriedades e decida como elas são ativadas: automaticamente na rolagem ou através do movimento do mouse do visitante.
Perguntas frequentes
Clique nas perguntas para saber mais sobre efeitos de animação.
A quais elementos posso adicionar animação?
Como faço para começar?
no canto superior direito do editor. 
para começar a configurar o tipo de animação que você deseja.Posso animar elementos relacionados aos apps do Wix?
Um único elemento pode ter várias animações?
Como posso combinar animações em um único elemento?
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
