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 o que o seu cliente deseja.
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 facilidade para juntar tudo. Em seguida, visualize o resultado final diretamente do 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 no seu design com animações que se repetem continuamente. Você pode adicionar uma animação de loop a qualquer elemento que você quer que os visitantes notem. Alguns são mais sutis e outros chamam a atenção.
Efeitos WebGL para backgrounds de mídia
Transforme os projetos dos seus clientes com nossos efeitos WebGL, criados para transformar backgrounds de mídia em elementos de destaque. Esses efeitos chamam a atenção dos visitantes do site e, ao mesmo tempo, garantem um 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?
Como as sobreposições de breakpoint funcionam nas animações?
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
