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.
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.
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.
- 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.
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.
- 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.
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.
- Clique na aba Interações .
- Passe o mouse sobre a animação e clique no ícone Mais ações
. - Clique em Remover.
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?
|