Editor do Wix Studio: adicionar uma animação de rolagem
6 min
Neste artigo
- Adicionar uma animação de rolagem
- Personalizar uma animação de rolagem
- Remover uma animação de rolagem
- Solução de problemas com animações de rolagem
- O efeito de rolagem aparece muito tarde
- (Apenas para mobile) O efeito de rolagem não aparece no modo paisagem
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.
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 um tipo de animação (para dentro ou para fora)
Para adicionar uma animação de rolagem:
- Selecione o elemento relevante.
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
- Clique na aba Animações e efeitos
. - Clique em + Adicionar em Rolagem.
- Configure a animação:
- Escolha qual elemento mostra a animação em Elemento animado.
- Selecione uma opção em Tipo de animação para decidir se o elemento é animado para dentro ou para fora do seu posicionamento original:
- Para dentro: o ponto final da animação é o design atual na tela (por exemplo: o elemento aparece gradualmente à medida que você rola para baixo).
- Para fora: o ponto de partida da animação é o design atual na tela (por exemplo: o elemento desaparece enquanto você rola para baixo)
- 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.
Procurando por rolagem horizontal?
Embora as opções no Inspetor se apliquem à rolagem vertical, você pode seguir nosso tutorial da Wix Academy (em inglês) para criar um efeito de rolagem horizontal impressionante.
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 relevante.
- Clique no ícone Abrir inspetor no canto superior direito do editor.
- Clique na aba Animações e efeitos .
- Clique na animação de rolagem 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, durante a 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 0% - 50%, a animação começa quando o elemento estiver na parte inferior da tela e para quando atingir o meio.
Dica:
Ative a alavanca Rolar para visualizar para ver a animação que você está criando diretamente na tela.
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 Animações e efeitos .
- 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 a sua animação da rolagem começar muito tarde ou não se comportar como esperado, você pode ajustar as configurações do Tipo de animação (Para dentro ou Para fora) e da Área da animação para corrigir o problema.
Confira o tutorial em vídeo para descobrir a causa do atraso e como corrigi-lo.
(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.
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
