Estilo do bloco: animação ao aparecer na tela
Faça um bloco surgir, subir, aproximar ou vir do lado quando o visitante rola a página até ele. Veja quando usar e como evitar exagero.
No grupo Efeitos da aba Estilo existe o campo Animação ao aparecer na tela. Ele faz o bloco entrar com um movimento suave quando o visitante rola a página e chega nele. Dá vida à página sem precisar de nenhuma ferramenta extra.
As opções
| Opção | O que acontece |
|---|---|
| Nenhuma | O bloco já aparece pronto (padrão). |
| Surgir | O bloco aparece gradualmente (fica de transparente a visível). |
| Subir | Aparece e sobe um pouquinho (cerca de 36 px) até o lugar. |
| Aproximar | Aparece crescendo um pouco, como se chegasse mais perto (de 94% para 100%). |
| Vir do lado | Aparece deslizando da esquerda para o lugar (cerca de 40 px). |
12- 1Animação ao aparecer na tela: Nenhuma, Surgir, Subir, Aproximar ou Vir do lado.
- 2Grupo Efeitos.
Como funciona
- O movimento dura menos de um segundo (0,7 s) e acontece uma vez só, quando o bloco entra na área visível da tela.
- Se o visitante rolar de volta para cima, o bloco não se anima de novo.
- Quem configurou o celular ou o computador para "reduzir movimento" (acessibilidade) vê o bloco sem animação.
- Se o navegador for muito antigo, o bloco simplesmente aparece, sem efeito.
Passo a passo
- Selecione o bloco e abra a aba Estilo.
- Role até o grupo Efeitos.
- Escolha a animação em "Animação ao aparecer na tela".
- Publique e veja no site de verdade. Dentro do editor os blocos aparecem logo, sem animação, para não atrapalhar a edição.
12- 1Escolha o efeito.
- 2Publique para ver a animação no site de verdade.
Dica: use "Subir" ou "Surgir" em poucos blocos (dois ou três por página). A seção pronta "Sobre a imobiliária com foto" já vem com "Subir" como exemplo.
Boas práticas
- Não anime o primeiro bloco da página (o Banner com busca): a pessoa não deveria esperar para ver o início do site.
- Use o mesmo efeito em todas as seções animadas; misturar os quatro cansa.
- Evite animar blocos de formulário e vitrines enormes: ficam piscando em celulares fracos.
12- 1Animação.
- 2Logo abaixo fica o CSS personalizado.
Se o bloco começa invisível e o visitante tem JavaScript desligado, ele pode não aparecer. Por isso o efeito é opcional e vem desligado ("Nenhuma").
Perguntas frequentes
Não vejo a animação no editor.
É de propósito: dentro do editor os blocos aparecem logo. Abra o link de prévia ou o site publicado para ver o efeito.
Posso animar só no celular?
Não há animação separada. Use o campo Mostrar em com duas cópias do bloco, uma para cada aparelho.
Veja também
Este artigo ajudou?