Éditeur de Studio : Ajouter une animation de défilement

Temps de lecture : 4 min
Ajoutez des animations de défilement pour rendre l'expérience de navigation plus attrayante et mémorable. La progression de l'animation est directement liée à la position de défilement, révélant ou transformant un élément lorsque les visiteurs font défiler vers le haut et vers le bas. 
Un exemple d'animation de défilement sur un site en ligne
Dans cet article, apprenez-en plus sur :

Ajouter une animation de défilement

Pour ajouter une nouvelle animation de défilement, sélectionnez l'élément qui la déclenche. L'animation que vous choisissez commence lorsque les visiteurs font défiler cet élément. Ensuite, décidez quel élément s'anime et sélectionnez un chemin d'animation.

Pour ajouter une animation de défilement :

  1. Sélectionnez l'élément ou la section concerné.
  2. Cliquez sur la flèche Ouvrir l'inspecteur  en haut à droite de l'Éditeur.
  3. Cliquez sur l'onglet Interactions .
  4. Cliquez sur + Ajouter sous Défilement.
  5. Configurez l'animation :
    1. Choisissez l'élément qui affiche l'animation sous Élément animé
    2. Sélectionnez une option sous Trajectoire de l'animation pour décider de la façon dont l'animation commence, en référence à l'élément que vous avez conçu. Vous pouvez faire du design sur la toile le point de départ de l'animation (À partir de son design) ou son point de fin (Jusqu'à son design).
    3. Sélectionnez une animation dans la liste.
      Suggestion : Survolez les animations pour voir un aperçu de leur aspect. 
Survolez les animations dans l'inspecteur pour voir leur aperçu

Personnaliser une animation de défilement

Après avoir choisi une animation, configurez-la pour qu'elle se comporte comme vous le souhaitez. Les paramètres disponibles dépendent de l'animation spécifique que vous choisissez.

Pour personnaliser une animation de défilement :

  1. Sélectionnez l'élément ou la section concerné.
  2. Cliquez sur la flèche Ouvrir l'inspecteur  en haut à droite de l'Éditeur.
  3. Cliquez sur l'onglet Interactions .
  4. Cliquez sur l'animation que vous souhaitez modifier. 
  5. Cliquez sur Ajuster l'animation pour modifier ses paramètres :
    • Direction : Choisissez la direction d'où l'animation doit provenir (par exemple de gauche, d'en haut).
    • Échelle : Définissez la taille cible de l'élément dans cette animation. Par exemple, 80 % signifie que l'élément diminue de 20 % dans l'animation. 
    • Distance : Décidez de la distance où l'élément se déplace dans cette animation.
    • Zone d'animation : Décidez à quel moment lors du défilement l'animation commence et s'interrompt. 0 % représente le bas de l'écran et 100 % le haut. Par exemple, si vous définissez la zone sur 100%, l'animation commence lorsque l'élément est en bas et se termine lorsqu'il atteint le haut. 
Suggestion :
Activez le curseur Faire défiler vers l'aperçu pour voir l'animation que vous créez, directement sur la toile. 
Un GIF montrant que pendant que vous ajustez une animation de défilement, vous pouvez également la prévisualiser sur la toile

Supprimer une animation de défilement

Vous pouvez supprimer une animation de défilement à tout moment depuis le panneau Inspecteur. 

Pour supprimer une animation de défilement :

  1. Sélectionnez l'élément ou la section concerné.
  2. Cliquez sur la flèche Ouvrir l'inspecteur  en haut à droite de l'Éditeur.
  3. Cliquez sur l'onglet Interactions .
  4. Survolez l'animation et cliquez sur l'icône Plus d'actions .
  5. Cliquez sur Supprimer.
Supprimer l'animation de défilement, du panneau inspecteur

Cela vous a-t-il aidé ?

|