Éditeur Studio : Ajouter une animation de défilement
Temps de lecture : 7 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.
Suggestion :
Consultez notre cours de l'Académie Wix Studio et apprenez-en plus sur l'ajout d'animations et d'interactions.
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 est animé et sélectionnez un type d'animation (interne ou externe).
Pour ajouter une animation de défilement :
- Sélectionnez l'élément ou la section concerné.
- Cliquez sur l'icône Ouvrir l'inspecteur
en haut à droite de l'éditeur.
- Cliquez sur l'onglet Animations et effets
. - Cliquez sur + Ajouter sous Défilement.
- Configurez l'animation :
- Choisissez l'élément qui affiche l'animation sous Élément animé.
- Sélectionnez une option sous Type d'animation pour décider si l'élément s'anime dans ou en dehors de son emplacement d'origine :
- In : Le point de fin de l'animation est le design actuel sur la toile (par exemple l'élément s'estompe lorsque vous faites défiler vers le bas).
- Sortie : Le point de départ de l'animation est le design actuel sur la toile (par exemple l'élément s'estompe lorsque vous faites défiler vers le bas)
- Sélectionnez une animation dans la liste.
Suggestion : Survolez les animations pour voir un aperçu de leur apparence.
Remarques :
- Il n'est pas possible de définir un épinglée comme déclencheur, car il reste toujours dans la même position (par rapport à la zone d'affichage du visiteur).
- Assurez-vous qu'il y a suffisamment de place sur la page pour que l'animation de défilement apparaisse correctement. Par exemple, si votre élément est situé sur le premier ou le dernier pli de la page, vous ne verrez peut-être pas l'animation de défilement.
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 :
- Sélectionnez l'élément ou la section concerné.
- Cliquez sur l'icône Ouvrir l'inspecteur en haut à droite de l'éditeur.
- Cliquez sur l'onglet Animations et effets .
- Cliquez sur l'animation que vous souhaitez modifier.
- 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.
Paramétrer la zone d'animation du défilement
Décidez à quel point, pendant le défilement, l'animation commence et s'arrête. 0% représente le bas de l'écran et 100% est le haut.
Par exemple, si vous définissez la zone sur 0% - 50%, l'animation commence lorsque l'élément est en bas de l'écran et s'arrête lorsqu'il atteint le milieu.
Pour définir la zone d'animation du défilement :
- Sélectionnez l'élément ou la section concerné.
- Cliquez sur l'icône Ouvrir l'inspecteur en haut à droite de l'éditeur.
- Cliquez sur l'onglet Animations et effets .
- Cliquez sur l'animation que vous souhaitez modifier.
- Cliquez sur Ajuster l'animation
- Faites glisser les points sous Zone d'animation pour définir son début et sa fin.
Suggestion : Vous pouvez cliquer sur les points pour saisir le pourcentage manuellement.
Testez la zone d'animation :
Lorsque le curseur Faire défiler pour prévisualiser est activé, une indication apparaît sur le curseur Zone d'animation afin que vous puissiez mieux comprendre la partie exacte de l'écran où l'animation apparaîtrait.
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 :
- Sélectionnez l'élément ou la section concerné.
- Cliquez sur l'icône Ouvrir l'inspecteur en haut à droite de l'éditeur.
- Cliquez sur l'onglet Animations et effets .
- Survolez l'animation et cliquez sur l'icône Plus d'actions
. - Cliquez sur Supprimer.
Dépannage des animations de défilement
L'effet de défilement apparaît trop tard
Si une animation de défilement ne se produit pas lorsque vous le souhaitez, il y a deux propriétés à regarder : la Trajectoire de l'animation et la Zone d'animation. Suivez les étapes décrites dans ce tutoriel vidéo pour découvrir la cause du retard et comment le résoudre.
(mobile uniquement) L'effet de défilement n'apparaît pas en mode paysage
Lorsque vous consultez le site de votre client sur un appareil mobile, l'animation de défilement peut cesser de fonctionner si le visiteur fait pivoter son écran à mi-parcours. En d'autres termes, s'ils retournent leur téléphone en mode horizontal (mode paysage) tout en faisant défiler la page, l'animation de défilement n'apparaîtra pas.
Pour résoudre ce problème, les visiteurs peuvent rafraîchir la page en mode paysage - cela "relancera" l'animation.
Cela vous a-t-il aidé ?
|