Éditeur Wix: Ajouter et personnaliser une animation
4 min
Dans cet article
- Ajouter une animation à un élément
- Personnaliser une animation
- Ajouter des animations à votre site mobile
Utilisez des animations pour donner vie à votre site. Nous proposons diverses animations pour tous les aspects de votre design : entrée, défilement, en boucle et même effets de souris.
Vous pouvez personnaliser l'animation pour qu'elle soit exactement ce que vous avez prévu. Par exemple, ajustez la distance, la durée, le délai et bien plus encore. Nos animations mobiles sont conçues pour s'adapter aux écrans plus petits, afin que vous puissiez impressionner vos visiteurs sur n'importe quel appareil.
Vous pouvez appliquer différentes animations et effets au même élément.
Des problèmes avec votre animation ?
Suivez nos étapes pour vous assurer que vos animations fonctionnent comme prévu sur votre site en ligne.
Ajouter une animation à un élément
Rendez votre site dynamique et attrayant en ajoutant une animation à vos éléments. Chaque animation a son propre effet différent, vous pouvez donc les mélanger avec différents éléments et donner à vos visiteurs une impression durable.
Suggestion :
Vous pouvez ajouter une animation à un groupe d'éléments en sélectionnant le groupe et en cliquant sur l'icône Animation 
.
.Pour ajouter une animation :
- Cliquez sur l'élément concerné dans votre Éditeur.
- Cliquez sur l'icône Animation .
- Sélectionnez une animation parmi les options disponibles.
- Entrée : L'animation n'est lue qu'une seule fois lorsque l'élément sélectionné apparaît à l'écran.
- En boucle : L'animation est lue en boucle.
- Défilement : L'animation est lue lorsque l'élément défile dans la vue.
- Animation et effets : L'animation commence à se déplacer lorsque le curseur du visiteur survole l'élément.
Remarque :
Les éléments de votre en-tête ne seront animés qu'une seule fois, lors de la première visite sur la page.
Personnaliser une animation
Après avoir ajouté une animation à un élément, vous pouvez le personnaliser pour qu'il se comporte comme vous le souhaitez et qu'il corresponde à l’atmosphère de votre site.
Ajustez les paramètres tels que la puissance, la direction et le délai pour avoir un impact et engager vos visiteurs.
Remarque :
Les options de personnalisation disponibles dépendent de l'animation que vous choisissez.
Pour personnaliser l'animation :
- Cliquez sur l'élément concerné dans votre Éditeur.
- Cliquez sur l'icône Animation .
- Cliquez sur Personnaliser et utilisez les options pour ajuster votre animation :
- Puissance : Cliquez sur le menu déroulant pour sélectionner la puissance de l'animation lorsqu'elle est lue.
- Direction : Sélectionnez la direction à partir de laquelle l'animation entre (par exemple dans le sens des aiguilles d'une montre, à partir de la droite).
- Distance : Utilisez le curseur pour modifier la distance entre le point de départ et le point de fin de l'effet.
- Durée : Utilisez le curseur pour ajuster la durée de lecture de l'animation.
- Délai : Faites glisser le curseur pour augmenter ou diminuer le délai entre le chargement de la page et le début de l'animation.
- Vitesse : Faites glisser le curseur pour modifier la vitesse de l'effet : plus le nombre est bas, plus l'effet est rapide.
- Axe de déplacement : Décidez si l'élément se déplace horizontalement, verticalement ou sur les deux dimensions.
- Type d'animation : Choisissez parmi le type d'animation interne, externe ou continu lors du défilement.
- Pivoter : Sélectionnez le point de référence à partir duquel l'élément commence à se déplacer.
- Mouvement : Sélectionnez l'intensité du mouvement, par exemple léger ou moyen.
Suggestion d'accessibilité :
Si cet élément est purement décoratif, c'est-à-dire qu'il n'inclut pas les informations importantes pour les lecteurs d'écran, cochez la case Design dans les paramètres 
.
.Ajouter des animations à votre site mobile
En plus d'ajouter des animations aux éléments de votre site sur ordinateur, vous pouvez également les ajouter à votre site mobile, afin que vos visiteurs bénéficient d'une excellente expérience de navigation depuis tous leurs appareils.
Les animations pour mobile ont été spécialement conçues pour les petites résolutions et tailles d'écran, vous n'avez donc pas à vous soucier de l'espacement.
Remarque :
Les effets d'animation que vous ajoutez sur ordinateur ne sont pas reportés sur votre site mobile, car ils sont optimisés pour différentes tailles d'écran. Si vous souhaitez qu'un élément soit également animé sur mobile, suivez les étapes ci-dessous.
Pour ajouter une animation sur mobile :
- Accédez à votre éditeur mobile.
- Cliquez sur l'élément concerné.
- Cliquez sur l'icône Animation .
- Sélectionnez une animation parmi les options disponibles.
Remarque importante pour Velo :
Si vous utilisez Velo (code) pour masquer ou afficher un élément, son animation doit également être définie via Velo.