Editor do Wix Studio: sobre animações

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

Interações ao passar o mouse e ao clicar

Adicione efeitos interessantes que aparecem quando os visitantes passam o mouse 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.
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 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. 
Um exemplo de um elemento de máscara de texto com uma animação em loop em um site online

Esse artigo foi útil?

|