Déclencher une animation à l’apparition ou au défilement

Une apparition démarre quand un élément atteint une position dans l’écran, puis se déroule pendant une durée définie. Une animation au défilement avance au rythme de la page. Choisissez selon l’effet que vous voulez obtenir.

Ce guide montre les commandes nocode du mode Expert.

Avant de tester le mouvement : dans le menu Écran, utilisez un seul cadre et activez Activer les animations. Cette option concerne le rendu dans l’éditeur. En affichage de plusieurs écrans côte à côte, les animations sont désactivées.

1. Choisir le déclencheur

Sélectionnez l’élément et ouvrez son animation. Les boutons du haut proposent Appear, Scroll, Hover, Click et Loop.

• Appear : apparition à l’entrée dans la zone de lecture.
• Scroll : progression liée au défilement.
• Hover : interaction au survol de la souris.
• Click : effet pendant la pression, pas une action de navigation.
• Loop : mouvement répété en continu.

Ce choix concerne tous les effets de l’animation ouverte. Il peut aussi modifier les réglages proposés sous les valeurs. Relisez-les après un changement de déclencheur.

2. Régler une apparition

Choisissez Appear. Réglez Durée pour choisir la vitesse du mouvement et Délai pour faire attendre l’effet.

La commande de visibilité fixe le point auquel l’apparition démarre. Dans la démonstration, elle est réglée à 20 %, avec une durée de 800 ms. Le repère correspond à la progression de l’élément dans le défilement ; ce n’est pas un calcul du pourcentage de pixels visibles de son contenu.

Utilisez Lecture pour revoir le mouvement. Vérifiez aussi une véritable entrée dans l’écran : placez-vous avant l’élément, puis descendez dans la page.

3. Lier l’effet au défilement

Choisissez Scroll. Une section de plage de défilement remplace les réglages temporels.

Début et Fin définissent la portion du passage de l’élément dans l’écran pendant laquelle ses valeurs évoluent. Avec les repères de cet éditeur, 0 % correspond à son entrée dans la fenêtre et 100 % à sa sortie.

Pour commencer, choisissez 20 % et 80 %. L’animation évolue entre ces deux repères. Donnez au début une valeur plus petite que la fin pour obtenir une progression facile à comprendre.

4. Tester avec la page

Fermez le panneau de réglage et faites défiler la page dans les deux sens. Dans la démonstration, l’opacité du paragraphe change réellement pendant ce déplacement.

Ne jugez pas ce résultat uniquement avec Lecture : une animation au défilement dépend de la position dans la page. Vérifiez le mouvement sur un écran plus petit, car la hauteur du texte et de ses conteneurs change.

5. Choisir le comportement au prochain passage

Pour une apparition, vous pouvez conserver une lecture unique ou autoriser une nouvelle lecture. Les options de sortie déterminent alors si l’état est conservé ou remis au début.

Régler les répétitions et l’état à la sortie.

Si le résultat n’est pas celui attendu

Vérifiez l’élément sélectionné, le déclencheur actif, les valeurs de l’effet et sa plage. Un effet configuré uniquement au survol ne constitue pas une interaction tactile fiable : le contenu important doit rester accessible sans ce survol.