Centre d'assistance Wix
    Accueil
  1. Créer votre site
  2. Editor X
  3. Ajouter des effets et animations
    4. Editor X : Ajouter une interaction prédéfinie

Editor X : Ajouter une interaction prédéfinie

Temps de lecture : 5 min
Editor X passe à Wix Studio, notre nouvelle plateforme pour les agences et les freelances.En savoir plus sur Wix Studio
Ajouter des Interactions pour créer une expérience animée lorsque les visiteurs cliquent ou survolent des éléments. Besoin d'une animation simple et rapide ? Utilisez l'un de nos éléments prédéfinis (par exemple augmenter, déplacer, augmenter) et ajustez-le à votre convenance. 
L’interaction peut animer le même élément que celui sur lequel les visiteurs cliquent ou survolent, ou un élément différent de la page. Quoi qu'il en soit, vous contrôlez totalement l'aspect, l'ambiance et le moment choisi pour que votre action soit réellement efficace. 
GIF montrant à quoi ressemblent les interactions sur un site en ligne.

Étape 1 | Ajouter un déclencheur (Clic ou mode survol)

Pour commencer, sélectionnez l'élément qui déclenche l'interaction. Il s’agit de l’élément sur lequel vos visiteurs survolent ou cliquent avant de voir l’animation. Ensuite, accédez à l'onglet Interactions dans le panneau inspecteur pour ajouter votre nouvelle interaction. 
Suggestion :
Vous pouvez ajouter plusieurs interactions à un élément pour qu'il déclenche une animation différente lors du survol ou du clic.

Pour ajouter un déclencheur :

  1. Sélectionnez l'élément qui doit déclencher l'interaction.
  2. Cliquez sur l'icône Inspecteur en haut de l'Editor X.
  3. (Dans l'inspecteur) Cliquez sur l'onglet Interactions .
  4. Cliquez sur + Ajouter sous Survol / Clic. 
Capture d'écran de l'onglet Interactions dans le panneau inspecteur, où vous pouvez ajouter une nouvelle interaction

Étape 2 | Configurer votre interaction

Après avoir choisi un élément et un déclencheur, configurez l'interaction. Sélectionnez une animation prédéfinie, l'élément qui doit l'afficher et ce qui se passe exactement lors du survol ou du clic.
Remarque :
Les animations disponibles varient en fonction de l'élément que vous sélectionnez.

Pour configurer votre interaction :

  1. (Dans le panneau de configuration de l'interaction) Choisissez ce qui se passe Au survol / au clic:
    • Démarrer l'animation : Cliquez sur / survolez l'élément pour déclencher l'animation choisie.
    • Réinitialiser l'animation : Cliquer / survoler l'élément supprime toute animation qui a été précédemment appliquée.
    • Activer/désactiver : Cliquer sur l'élément déclenche l'animation et un deuxième clic le supprime.
      Remarque : Cette option n'est disponible que pour les interactions de clic.
  2. Sélectionnez l' élément animé:
    • Faire en sorte que l'élément déclenche sa propre animation : Cliquez sur le nom de l'élément (le mot (self) apparaît à côté).
    • Animer un autre élément de la page : Sélectionnez un élément dans le menu déroulant ou cliquez sur Choisir sur la toile pour le sélectionner sur la page.
      Suggestion : Maintenez la touche Cmd / Ctrl pour sélectionner un élément enfant.
  3. Sélectionner une animation :
    1. Cliquez sur l'onglet Prédéfinies . 
    2. Choisissez une animation dans la liste.
Capture d'écran de la configuration de l'interaction dans l'inspecteur, sélection d'une animation prédéfinie.
Suggestion :
Lorsque vous configurez un élément pour qu'il s'affiche lors du clic ou du survol, il apparaît avec une superposition de quadrillages sur la zone de travail. Cela sert à indiquer que l'élément est initialement transparent. 
Un bouton configuré pour apparaître au survol, apparaissant avec une superposition de quadrillages sur la zone de travail dans l'Editor X
Vous pouvez désactiver cette indication à tout moment. Cliquez sur Afficher dans la barre supérieure, puis sur Éléments transparents.

Étape 3 | (Facultatif) Ajuster l'animation

Après avoir choisi l'animation que vous souhaitez, personnalisez-la pour obtenir l'effet désiré. Vous pouvez contrôler des paramètres tels que la durée, le délai et le comportement pour rendre l'animation vraiment efficace. 

Pour ajuster l'animation :

  1. (Dans l'inspecteur) Cliquez sur Ajuster l'animation en bas de l'écran.
  2. Personnalisez les paramètres disponibles à votre convenance :
    • Délai : Faites glisser le curseur pour ajouter un délai (en secondes) avant le début de l'animation.
    • Durée : Faites glisser le curseur pour définir la durée de l'animation (en secondes).
    • Comportement : Choisissez la manière dont l'animation varie dans le menu déroulant.
    • Échelle : Choisissez l'agrandissement ou la réduction de votre élément. 
    • Angle : Modifiez l'angle de mouvement. 
    • Distance : Permet à votre élément de s'éloigner ou de se rapprocher de sa position par défaut sur la page.
    • Direction : Modifiez la direction dans laquelle votre élément pivote.
  3. (Facultatif) Cliquez sur Aperçu pour voir à quoi ressemble votre animation et effectuer des ajustements, si nécessaire. 
Remarque :
Les paramètres disponibles dépendent de l'animation prédéfinie que vous choisissez.
Capture d'écran du panneau inspecteur, ajustant les paramètres d'une animation prédéfinie
Prochaine étape ?

FAQ

Cliquez ci-dessous pour en savoir plus sur la création d'interactions. 

Cela vous a-t-il aidé ?

|

Dans cet article

  • Étape 1 | Ajouter un déclencheur (Clic ou mode survol)
  • Étape 2 | Configurer votre interaction
  • Étape 3 | (Facultatif) Ajuster l'animation
  • FAQ