header-logo
Confira como usar o Wix para construir seu site e negócio.
Personalize e gerencie seu site com os recursos do Wix.
Gerencie assinaturas, planos e faturas.
Administre seu negócio e conecte-se com os membros.
Compre, conecte ou transfira um domínio para o seu site.
Expanda seu negócio e presença online.
Aumente sua visibilidade com recursos de SEO e marketing.
Acesse recursos avançados e otimize sua produtividade.
Encontre soluções, problemas conhecidos ou contate-nos.
placeholder-preview-image
Domine novas habilidades com nossos cursos e tutoriais.
Confira nossas dicas de web design, marketing e mais.
Aumente o tráfego orgânico vindo dos motores de busca.
Desenvolva um site único com a nossa plataforma full-stack.
Alcance seus objetivos com a ajuda de um especialista.
placeholder-preview-image

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.
Um exemplo de uma animação de entrada aplicada a uma página inteira, revelando-a à medida que é carregada

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.
GIF mostrando como as interações aparecem em um site online.

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. 
Um exemplo de uma animação de rolagem em um site online

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. 
Um exemplo de um elemento de máscara de texto com uma animação em loop em um site online

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. 
Um GIF mostrando um site online com animações WebGL no background de várias seções.

Perguntas frequentes

Clique nas perguntas para saber mais sobre efeitos de animação.