header-logo
Primeiros passosConfira como você pode usar o Wix para criar seu site e seu negócio. Personalize seu site usando templates ou contrate um profissional para criar ou aprimorar sua presença online.
Crie o seu siteAprenda a usar o Editor Wix e a gerenciar o conteúdo de seu site. Descubra como proteger a privacidade de seus visitantes e tornar seu site acessível.
Conta e faturamentoRevise as configurações da sua conta, gerencie suas assinaturas e planos Premium e entenda suas faturas.
Use os apps mobile do WixUse o app Wix Owner para administrar seu negócio com eficiência, interagir com seus visitantes e criar uma comunidade.
Conecte um domínioEntenda como comprar, conectar ou transferir um domínio e como manter os dados do seu site seguros.
Gerencie o seu negócioEncontre as ferramentas certas para criar e expandir seus negócios: aceite pagamentos, analise suas estatísticas, conecte-se com visitantes e muito mais.
Promova o seu siteConfira como promover seu site nos motores de busca, enviar campanhas de email e veicular anúncios pagos.
Wix Studio, Parceiros e empresasTire o máximo proveito da sua conta do Wix Studio, Parceiro Wix ou Wix Empresarial, para que você possa expandir seus negócios.
AjudaObtenha informações sobre como resolver os problemas técnicos e de desempenho do seu site. Além disso, acompanhe os próximos recursos em nosso roadmap de produtos.
placeholder-preview-image
Wix LearnDomine novas habilidades com nossos cursos e tutoriais.
Blog do WixConfira nossas dicas de web design, marketing e mais.
Learning Hub de SEOAumente o tráfego orgânico vindo dos motores de busca.
Website developmentDesenvolva um site único com a nossa plataforma full-stack.
Contrate um profissionalAlcance seus objetivos com a ajuda de um especialista.
placeholder-preview-image

Editor do Wix Studio: sobre animações

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.