Éditeur Studio : Ajouter une animation de défilement
Temps de lecture : 6 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 s'anime et sélectionnez un chemin d'animation.
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 Interactions
. - 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 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).
- Sélectionnez une animation dans la liste.
Suggestion : Survolez les animations pour voir un aperçu de leur aspect.
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 Interactions .
- 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 Interactions .
- Cliquez sur l'animation que vous souhaitez modifier.
- Cliquez sur Ajuster l'animation
- Faites glisser les points sous Zone d'animation pour définir quand elle commence et se termine.
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 Interactions .
- 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é ?
|