Editor do Wix Studio: adicionar uma animação de rolagem
6 min de leitura
Adicione animações de rolagem para tornar a experiência de navegação mais envolvente e memorável. O progresso da animação está diretamente vinculado à posição de rolagem, revelando ou transformando um elemento enquanto os visitantes percorrem pela página.
Dica:
Confira nosso curso da Wix Studio Academy e saiba mais sobre como adicionar animações e interações.
Neste artigo, saiba mais sobre como:
Adicionar uma animação de rolagem
Para adicionar uma nova animação de rolagem, selecione o elemento que a aciona. A animação que você escolher começa quando os visitantes passam por esse elemento na página. Em seguida, decida qual elemento é animado e selecione a direção da animação.
![Um exemplo de uma animação de rolagem em um site online](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/27/7f03d14c-ca43-4837-9e5f-a9a023a228df/23e05c1b-2649-4ecf-9384-8ca3c34deab0.gif)
Para adicionar uma animação de rolagem:
- Selecione o elemento ou seção relevante.
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
- Clique na aba Interações
.
- Clique em + Adicionar em Rolar.
- Configure a animação:
- Escolha qual elemento mostra a animação em Elemento animado.
- Selecione uma opção em Direção da animação para decidir como a animação começa, em referência ao elemento que você criou. Você pode tornar o design na tela o ponto inicial da animação (A partir do design) ou o ponto final (Para o design).
- Selecione uma animação da lista.
Dica: passe o mouse sobre as animações para ver como elas ficam.
![Passando o mouse sobre animações de rolagem no Inspetor para ver uma prévia](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/27/74787be3-cd2c-472e-bf2e-b10e9a57aebc/c963f099-505b-4d20-a54a-3f5ada5449bd.gif)
Observações:
- Não é possível definir um elemento fixo como o gatilho, pois ele sempre permanece na mesma posição (em relação à janela de visualização do visitante).
- Certifique-se de que há espaço suficiente na página para que a animação de rolagem apareça corretamente. Por exemplo, se o seu elemento estiver localizado na primeira ou na última dobra da página, pode ser que você não veja a animação de rolagem.
Personalizar uma animação de rolagem
Depois de escolher uma animação, configure-a para se comportar da maneira que você deseja. As configurações disponíveis dependem da animação específica que você escolher.
Para personalizar uma animação de rolagem:
- Selecione o elemento ou seção relevante.
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
![Uma captura de tela da abertura 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 Interações
.
- Clique na animação que você deseja alterar.
- Clique em Ajustar animação para alterar suas configurações:
- Direção: escolha a direção de onde a animação deve vir (por exemplo: da esquerda, de cima).
- Dimensão: defina o tamanho desejado para o elemento nessa animação. Por exemplo, 80% significa que o elemento diminui em 20% na animação.
- Distância: decida até onde o elemento se move nessa animação.
- Área da animação: decida em que ponto da rolagem a animação começa e para. 0% é a parte inferior da tela e 100% é a parte superior. Por exemplo, se você definir a área para 100%, a animação começa quando o elemento estiver na parte inferior e termina quando atinge o topo.
Dica:
Ative a alavanca Rolar para visualizar para ver a animação que você está criando diretamente na tela.
![Um GIF mostrando que você também pode visualizá-la na tela ao ajustar uma animação de rolagem](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/27/3d4e723e-abbb-46ce-a406-7b5fc7460fc1/616a3b23-bfed-43ff-a9cb-fc37cc1a22a8.gif)
Definir a área de animação de rolagem
Decida em que ponto, durante a rolagem, a animação começa e para. 0% representa a parte inferior da tela e 100% é a parte superior.
Por exemplo, se você definir a área para 0% - 50%, a animação começa quando o elemento estiver na parte inferior da tela e para quando atingir o meio.
Para definir a área de animação de rolagem:
- Selecione o elemento ou seção relevante.
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
![Uma captura de tela da abertura 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 Interações
.
- Clique na animação que você deseja alterar.
- Clique em Ajustar animação
- Arraste os pontos abaixo de Área da animação para definir quando ela começa e termina.
Dica: você pode clicar nos pontos para inserir a porcentagem manualmente.
![Um GIF da visualização da animação de rolagem dentro do editor e a indicação que aparece no Inspetor](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/06/02/6c038e02-9de7-4796-b4d2-339da18108b3/4a83541e-0129-468e-9c43-c116ec05f6f0.gif)
Teste a área de animação:
Quando a alavanca Rolar para visualizar está ativada, uma indicação aparece no slider Área de animação para que você possa entender melhor a parte exata da tela onde a animação apareceria.
Remover uma animação de rolagem
Você pode remover uma animação de rolagem a qualquer momento no painel Inspetor.
Para remover uma animação de rolagem:
- Selecione o elemento ou seção relevante.
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
![Uma captura de tela da abertura 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 Interações
.
- Passe o mouse sobre a animação e clique no ícone Mais ações
.
- Clique em Remover.
![Removendo a animação de rolagem, no painel Inspetor](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/27/5b219174-b492-464a-93fb-065b3f6b0d25/1145efc9-56d7-4431-8fdd-438863b14f80.png)
Solução de problemas com animações de rolagem
O efeito de rolagem aparece muito tarde
Se uma animação de rolagem não estiver acontecendo quando você quer, há duas propriedades a serem analisadas: a Direção da animação e a Área da animação. Siga as etapas descritas neste tutorial em vídeo para descobrir a causa do atraso e como corrigi-lo (vídeo em inglês).
(Apenas para mobile) O efeito de rolagem não aparece no modo paisagem
Ao visualizar o site do seu cliente em um dispositivo móvel, a animação de rolagem pode parar de funcionar se o visitante girar a tela no meio da navegação. Em outras palavras, se ele virar o telefone para a horizontal (modo paisagem) enquanto rola a página, a animação de rolagem não aparecerá.
Para resolver isso, os visitantes podem atualizar a página no modo paisagem. Isso "recomeça" a animação.
Esse artigo foi útil?
|