Editor do Wix Studio: adicionar uma animação de entrada
4 min de leitura
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.
![Exemplo de uma seção em um site online, cada elemento com sua própria animação de entrada](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/20/08cda0fe-8d63-4b62-8182-264266262d50/3840b03b-dd9e-4675-bb32-0c42d128a960.gif)
Neste artigo, saiba mais sobre como:
Adicionar uma animação de entrada
Você pode adicionar uma animação de entrada a elementos e seções específicos ou à página do site como um todo.
Para adicionar uma animação de entrada:
- Selecione o elemento relevante.
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
![Uma captura de tela do painel Inspetor no Editor do Wix Studio.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/07/ed25ff0f-6b3d-4d1c-9155-e9b1c788a0b5/326f9801-aa4e-4ca8-8989-360b80ec33f2.png)
- Clique na aba Animações e efeitos
.
- Clique em + Adicionar em Entrar.
- Selecione uma animação da lista.
Dica: passe o mouse sobre as animações para ver como elas ficam. - (Opcional) Clique em Ajustar animação na parte inferior para personalizar configurações como direção, atraso e duração.
![Um GIF mostrando que ao passar o mouse sobre os tipos de animação, uma prévia é mostrada](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/20/35efb98d-035e-4131-b105-6f877f1c7817/a5933c94-c4d2-4e15-9481-a71dda4ebc37.gif)
Personalizar uma animação de entrada
Depois de escolher uma animação, configure-a para se comportar da maneira que você deseja. Escolha quanto tempo dura a animação, quando começa, sua intensidade e mais.
Para personalizar uma animação de entrada:
- Selecione o elemento, seção ou página relevante.
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
![Uma captura de tela do painel Inspetor no Editor do Wix Studio.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/07/ed25ff0f-6b3d-4d1c-9155-e9b1c788a0b5/326f9801-aa4e-4ca8-8989-360b80ec33f2.png)
- Clique na aba Animações e efeitos
.
- Clique na animação que você deseja alterar.
- Clique em Ajustar animação para alterar suas configurações:
- Direção: decida de qual direção a animação deve vir.
Dica: dependendo do tipo de animação, você pode definir a direção em graus (por exemplo: 180°) ou escolher uma opção no menu dropdown (por exemplo: da esquerda para a direita, no sentido horário). - Duração: altere a duração da animação.
- Atraso: defina quanto tempo deve passar entre o carregamento da página e o início da animação.
- Easing: escolha a forma gradual com que a animação deve aparecer e/ou desaparecer.
- Direção: decida de qual direção a animação deve vir.
Observação:
As opções de personalização disponíveis dependem da animação que você escolher.
![Uma captura de tela mostrando as configurações disponíveis ao personalizar uma animação de entrada Mostrar](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/20/4ca6fa9f-95b3-4e22-b290-9cfba81e6f06/4ab8c836-3baa-4c83-9ec8-5b31738ee563.png)
Remover uma animação de entrada
Você pode remover uma animação de entrada a qualquer momento no painel Inspetor.
Para remover uma animação de entrada:
- Selecione o elemento relevante.
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
![Uma captura de tela do painel Inspetor no Editor do Wix Studio.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/07/ed25ff0f-6b3d-4d1c-9155-e9b1c788a0b5/326f9801-aa4e-4ca8-8989-360b80ec33f2.png)
- Clique na aba Animações e efeitos
.
- Passe o mouse sobre a animação e clique no ícone Mais ações
.
- Clique em Remover.
![Uma captura de tela mostrando como selecionar uma animação no Inspetor e removê-la](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/08/07/a6f94b27-1c05-4448-9893-be41f7a82954/1c45aa87-f74d-4215-ba97-85bc062a553c.png)
Esse artigo foi útil?
|