--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/design/onglet-animation' title: 'Animer les éléments au défilement, au survol ou au clic | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T10:59:56+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Animer les éléments au défilement, au survol ou au clic' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T10:59:56+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/design/onglet-animation' articleSection: 'Guides de design' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/design/onglet-animation' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Styler vos éléments](/fr/hc/documentation/learn-dxpr-builder/element-settings) /[Guides de design](/fr/hc/documentation/learn-dxpr-builder/design/overview) # Animer les éléments au défilement, au survol ou au clic. Apprendre DXPR BuilderCréer des pagesStyler vos élémentsGuides de design ## Dans ce guide Guides associés - [Faire réagir les éléments au survol](/fr/hc/documentation/apprendre-dxpr-builder/design/effets-de-survol) - [Donner à une section un arrière-plan couleur, photo ou dégradé](/fr/hc/documentation/apprendre-dxpr-builder/design/arriere-plans) - [Ajouter un carrousel](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/mise-en-page-carrousel) 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](/fr/hc/documentation/apprendre-dxpr-builder/design/effets-de-survol) : changer les couleurs, les ombres ou l’opacité pendant que le pointeur reste sur un élément. - [Arrière-plans](/fr/hc/documentation/apprendre-dxpr-builder/design/arriere-plans) : donner à la section animée une couleur, une photo ou un dégradé. - [Mise en page carrousel](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/mise-en-page-carrousel) : jouer les effets **On trigger** à chaque ouverture de slide.