Animer les éléments au défilement, au survol ou au clic.

Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

Vous pouvez faire bouger une section, une ligne ou tout élément de contenu. Faites apparaître un titre en fondu en montant quand il défile à l’écran, laissez un bouton suivre un moment plus tard, ou faites pulser une icône au survol. Chacun a un panneau Animation dans ses réglages. L’exemple fait apparaître un titre en fondu, puis un bouton d’inscription après un court délai.

La vidéo fait apparaître un bouton et un titre en fondu quand la section entre à l’écran.

Faire apparaître un titre et un bouton en fondu

  1. Cliquez sur Add Elements dans la zone de contenu vide et choisissez Section dans l’onglet Layout.
  2. Survolez la section et ouvrez More > Settings.
  3. Sous HTML classes, choisissez Align text center et cliquez sur Save.
  4. Cliquez sur + sur la section et choisissez Button dans l’onglet Content. Ses réglages s’ouvrent.
  5. Saisissez Register now dans Title et /register dans Link.
  6. Ouvrez le panneau Animation et réglez Animation start sur On appear.
  7. Réglez Animation in sur fadeInUp.
  8. Sous Hidden, cochez Before in-animation.
  9. Réglez In-delay sur 600 et cliquez sur Save.
  10. Cliquez de nouveau sur + sur la section et choisissez Text dans l’onglet Content. Il se place au-dessus du bouton.
  11. Saisissez un titre, comme Open day 2026, et mettez-le en Heading 2 dans la barre d’outils de l’éditeur.
  12. Ouvrez le panneau Animation. Choisissez On appear, fadeInUp et Before in-animation, comme pour le bouton.
  13. Réglez Duration sur 800 et cliquez sur Save.
  14. Cliquez sur Save sur la barre d’outils.
  15. Ouvrez le menu d’affichage (l’icône en forme d’œil sur la barre d’outils) et choisissez Preview.

Plus d’effets à essayer

  • Scroll reveal : On appear, fadeInUp, Before in-animation et une Duration de 800.
  • Staggered cards : le même effet sur trois cartes, avec un In-delay de 0, 200 et 400.
  • Attention pulse : On appear, pulse, Infinite activé et une Duration de 1500.
  • Hover pulse : On hover, pulse et un Parent number de 0, pour que seul l’élément lui-même réagisse.
  • Tab reveal : On trigger et fadeIn sur les éléments dans un onglet. Ils jouent à chaque ouverture de l’onglet.

Ce que vous voyez

Quand vous enregistrez le texte, l’éditeur joue les deux effets : le titre monte en fondu sur 800 millisecondes et le bouton suit 600 millisecondes plus tard. Les visiteurs voient la même chose quand la section défile à l’écran, une fois par chargement de page. Les deux restent invisibles jusqu’au démarrage de leur effet, car Before in-animation est coché.

Paramètres

Paramètre Rôle Valeur par défaut
Animation start Quand l’effet joue : On appear (défilé à l’écran), On hover, On click ou On trigger (quand le slide de carrousel, l’onglet ou le toggle qui contient l’élément s’ouvre) No animation
Animation in L’effet d’entrée : fondus, glissés, zooms, retournements et effets d’attention comme bounce, pulse et shake No animation
Animation out L’effet de sortie, de la même liste. S’affiche pour On hover et On trigger uniquement. No animation
Hidden Before in-animation garde l’élément invisible jusqu’à ce que son effet joue. After in-animation le masque une fois l’effet terminé. Aucun des deux
Infinite Répète l’effet sans fin Désactivé
Appear boundary Pour On appear : à quelle distance sous l’écran l’effet démarre, en pourcentage de la hauteur de l’écran. 0 le démarre quand l’élément défile à l’écran ; 100 le démarre une hauteur d’écran plus tôt. 100
Duration Durée de l’effet, de 0 à 3000 millisecondes 1000
In-delay Attente avant que l’entrée ne joue, jusqu’à 10000 millisecondes 0
Out-delay Attente avant que la sortie ne joue, jusqu’à 10000 millisecondes 0
Parent number Pour On hover et On click : l’élément que le visiteur survole ou sur lequel il clique. 0 est l’élément lui-même, 1 son parent, 2 le parent du parent. 1

Les colonnes n’ont pas de panneau Animation. Ni les onglets, toggles et slides isolés dans les éléments de mise en page. Animez plutôt l’élément dedans.

Si vous ne voyez pas l’animation

  • L’élément n’apparaît jamais. Before in-animation le masque jusqu’à ce que son effet joue, mais Animation in vaut No animation. Choisissez un effet dans Animation in.
  • L’effet a joué une fois et s’est arrêté. On appear joue une fois par chargement de page. Rechargez la page pour le revoir, ou activez Infinite pour un effet qui se répète.
  • L’effet démarre avant que le visiteur n’atteigne l’élément. Appear boundary est haut : à 100, l’effet démarre une hauteur d’écran avant que l’élément ne défile à l’écran. Réglez-le sur 0 dans le panneau Animation.
  • Survoler près de l’élément démarre l’effet. Parent number vaut 1, donc le parent écoute le pointeur. Réglez Parent number sur 0.

Et ensuite ?

  • Effets de survol : changer les couleurs, les ombres ou l’opacité pendant que le pointeur reste sur un élément.
  • Arrière-plans : donner à la section animée une couleur, une photo ou un dégradé.
  • Mise en page carrousel : jouer les effets On trigger à chaque ouverture de slide.