Animar elementos ao deslocar, pairar ou clicar.

Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

Qualquer secção, linha ou elemento de conteúdo pode mexer-se. Esbata um título de baixo para cima à medida que entra na vista, deixe um botão seguir um momento depois, ou faça um ícone pulsar ao pairar. Cada um tem um painel Animation nas definições. O exemplo esbate um título e depois um botão de registo após um pequeno atraso.

O vídeo esbate um botão e um título à medida que a secção entra na vista.

Esbater um título e um botão

  1. Clique em Add Elements na área de conteúdo vazia e escolha Section no separador Layout.
  2. Paire sobre a secção e abra More > Settings.
  3. Em HTML classes, escolha Align text center e clique em Save.
  4. Clique em + na secção e escolha Button no separador Content. As definições abrem.
  5. Escreva Register now em Title e /register em Link.
  6. Abra o painel Animation e defina Animation start como On appear.
  7. Defina Animation in como fadeInUp.
  8. Em Hidden, marque Before in-animation.
  9. Defina In-delay como 600 e clique em Save.
  10. Clique em + na secção outra vez e escolha Text no separador Content. Fica acima do botão.
  11. Escreva um título, por exemplo Open day 2026, e defina-o como Heading 2 na barra de ferramentas do editor.
  12. Abra o painel Animation. Escolha On appear, fadeInUp e Before in-animation, como no botão.
  13. Defina Duration como 800 e clique em Save.
  14. Clique em Save na barra de ferramentas.
  15. Abra o menu de vista (o ícone de olho na barra de ferramentas) e escolha Preview.

Mais efeitos para experimentar

  • Scroll reveal: On appear, fadeInUp, Before in-animation e uma Duration de 800.
  • Staggered cards: o mesmo efeito em três cartões, com um In-delay de 0, 200 e 400.
  • Attention pulse: On appear, pulse, Infinite ligado e uma Duration de 1500.
  • Hover pulse: On hover, pulse e um Parent number de 0, para só o próprio elemento reagir.
  • Tab reveal: On trigger e fadeIn nos elementos dentro de um separador. Tocam sempre que o separador abre.

O que vê

Ao guardar o texto, o editor toca ambos os efeitos: o título esbate-se de baixo para cima ao longo de 800 milissegundos e o botão segue 600 milissegundos depois. Os visitantes veem o mesmo à medida que a secção entra na vista, uma vez por carregamento de página. Ambos ficam invisíveis até o efeito começar, porque Before in-animation está marcado.

Definições

Setting What it does Default
Animation start Quando o efeito toca: On appear (deslocado para a vista), On hover, On click ou On trigger (quando o slide do carrossel, o separador ou o interrutor que contém o elemento abre) No animation
Animation in O efeito de entrada: esbatimentos, deslizamentos, aproximações, voltas e efeitos de chamada de atenção como bounce, pulse e shake No animation
Animation out O efeito de saída, da mesma lista. Aparece apenas para On hover e On trigger. No animation
Hidden Before in-animation mantém o elemento invisível até o efeito tocar. After in-animation esconde-o quando o efeito termina. Neither
Infinite Repete o efeito sem fim Off
Appear boundary Para On appear: a que distância abaixo do ecrã o efeito começa, em percentagem da altura do ecrã. 0 inicia-o quando o elemento entra na vista; 100 inicia-o uma altura de ecrã antes. 100
Duration Duração do efeito, de 0 a 3000 milissegundos 1000
In-delay Espera antes da entrada tocar, até 10000 milissegundos 0
Out-delay Espera antes da saída tocar, até 10000 milissegundos 0
Parent number Para On hover e On click: em que elemento o visitante aponta ou clica. 0 é o próprio elemento, 1 o elemento pai, 2 o pai do pai. 1

As colunas não têm painel Animation. Também não têm os separadores, interrutores e slides individuais dentro dos elementos de esquema. Anime o elemento dentro deles.

Se a animação não aparece

  • The element never appears. Before in-animation esconde-o até o efeito tocar, mas Animation in está em No animation. Escolha um efeito em Animation in.
  • The effect played once and stopped. On appear toca uma vez por carregamento de página. Recarregue a página para ver outra vez, ou ligue Infinite para um efeito que repete.
  • The effect starts before the visitor reaches the element. Appear boundary está alto: em 100, o efeito começa uma altura de ecrã antes de o elemento entrar na vista. Defina-o como 0 no painel Animation.
  • Hovering near the element starts the effect. Parent number é 1, por isso o elemento pai escuta o ponteiro. Defina Parent number como 0.

O que se segue?

  • Efeitos de pairar: mude cores, sombras ou opacidade enquanto o ponteiro descansa sobre um elemento.
  • Fundos: dê à secção animada uma cor, uma foto ou um gradiente.
  • Esquema de carrossel: toque efeitos On trigger sempre que um slide abre.