Eventos clássicos (AOS)

Durante muito tempo, o WebAcappella ofereceu animações de aparência por meio do WOW.js. Agora você pode optar por usar a biblioteca AOS (Animate On Scroll) diretamente nas propriedades do projeto. O AOS oferece efeitos de aparência modernos e fluidos que são fáceis de ajustar, sem a necessidade de escrever qualquer código.

Ativar o AOS no projeto

  1. Abra seu projeto WebAcappella.

  2. Vá para Propriedades do projeto → Animações.

Aplicar um efeito de aparência a um componente

  1. Selecione um componente (texto, imagem, botão, bloco etc.).

  2. Abra o painel Animação em Aparência.

  3. Escolha um tipo de efeito (por exemplo, fade, slide, zoom, rotação leve).

Melhores práticas

  • Menos é mais Limite-se a alguns efeitos coerentes (por exemplo, fade + leve tradução).

  • Foco no conteúdo O efeito deve ser fácil de entender (destaque um título, uma CTA, uma etapa principal).

  • Desempenho Evite animar muitos elementos simultaneamente, especialmente em dispositivos móveis.

  • Consistência visual Harmonize as durações, os prazos e os tipos de efeito em todo o local.

  • Acessibilidade / Conforto Prefira efeitos curtos e moderados que sejam agradáveis aos olhos e não intrusivos.

  • Compatibilidade do navegador Alguns efeitos podem aparecer de forma diferente em diferentes navegadores (especialmente no Safari). Teste suas páginas em vários dispositivos.

Casos de uso recomendados

  • Títulos das seções: leve desbotamento + discreto deslizamento vertical.

  • Blocos visuais (mapas, miniaturas): zoom muito leve na aparência.

  • CTA (botões de ação): desvanecimento rápido e limpo para manter a capacidade de resposta.

  • Listas de itens: aparência em cascata (atrasos curtos sucessivos).

Migração do WOW.js

  • Projetos antigos configurados com o WOW.js permanecem funcionais.

  • Para aproveitar as vantagens do AOS: 1. ative o AOS nas propriedades do projeto. 2. Volte aos seus componentes principais e reaplique os efeitos de aparência. 3. Alinhe as durações e os atrasos para garantir a consistência visual.

Lembrete de marketing

Animações bem escolhidas destacam suas mensagens (promoção, notícias, prova social) e atraem a atenção. O excesso de efeitos desvia a atenção do conteúdo, cansa o usuário e pode prejudicar a percepção de qualidade e velocidade.