Éditeur Studio : Créer une interaction de clique ou de survol personnalisée
Temps de lecture : 7 min
Ajoutez des interactions pour créer une expérience animée lorsque les visiteurs cliquent ou survolent des éléments. L'interaction peut animer le même élément qui l'a déclenchée, ou tout autre élément de la page.
Grâce aux interactions personnalisées, vous disposez d'une liberté créative totale pour concevoir une animation de A à Z. Vous pouvez également contrôler le timing de l'animation pour la rendre vraiment efficace.
Accédez à la Académie Wix Studio pour consulter les webinaires, les tutoriels et les cours supplémentaires de Wix Studio.
Étape 1 | Ajouter un déclencheur (cliquez ou survolez)
Pour commencer, sélectionnez l'élément qui déclenche l'interaction. Il s'agit de l'élément que les visiteurs survolent ou cliquent avant de voir l'animation. Ensuite, accédez au panneau Inspecteur pour ajouter une nouvelle interaction.
Suggestion :
Vous pouvez ajouter plusieurs interactions à un élément pour qu'ils déclenchent différentes animations lors du survol ou du clique.
Pour ajouter un déclencheur :
- Sélectionnez l'élément qui doit déclencher l'interaction.
- Cliquez sur l'icône Ouvrir l'Inspecteur
en haut à droite de l'éditeur.
- Cliquez sur l'onglet Animations et effets
. - Sélectionnez Survol / Clique.
- Cliquez sur + Ajouter.
Étape 2 | Configurer l'interaction
Vous pouvez maintenant choisir quel élément s'anime, l'animation qui doit apparaître et l'action exacte qui se produit lors du survol ou du clique (par exemple, appliquer l'animation, l'activer / la désactiver, etc.)
Pour configurer l'interaction :
- (Dans le panneau de configuration) Sélectionnez une option dans le menu déroulant Au survol / au clique :
- Démarrer l'animation : Cliquez / survolez l'élément pour déclencher l'animation choisie.
- Activer / désactiver : Semblable à un curseur, cliquer sur l'élément déclenche l'animation et un deuxième clic le supprime.
- Réinitialiser l'animation : Cliquer / survoler l'élément supprime toute animation qui a été précédemment appliquée.
- Sélectionnez une option dans le menu déroulant É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é).
- Animez 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.
- Cliquez sur l'onglet Personnalisé .
- Cliquez sur Créer une animation personnalisée.
Suggestion :
Les animations personnalisées que vous créez sont enregistrées pour une utilisation future sur d'autres éléments.
Étape 3 | Personnaliser l'animation
Il est maintenant temps de créer l'animation de A à Z. Ajoutez toutes sortes de mises en page et de transformations de design pour modifier la taille (Échelle), la position (Traduire), l'angle (Rotation), la couleur de remplissage de l'élément et plus encore.
Vous pouvez également concevoir l'état initial de l'élément pour compléter l'animation que vous avez créée. Voici à quoi ressemble l'élément lorsqu'il se charge, avant que les visiteurs n'interagissent avec lui. Pour relier le tout, définissez la durée et le comportement de l'animation.
Pour personnaliser l'animation :
- Choisissez comment vous souhaitez personnaliser l'animation :
Ajuster le design de l'élément
Concevoir l'état initial de l'élément
Définir la durée et le comportement
2. (Facultatif) Cliquez sur 
Jouez sur la barre flottante pour prévisualiser l'animation.
Jouez sur la barre flottante pour prévisualiser l'animation.3. Lorsque vous êtes prêt, cliquez sur Terminer.
Suggestion :
Lorsque vous configurez un élément pour qu'il s'affiche lors du clique ou du survol, il apparaît avec une superposition de quadrillages sur la toile. Cela sert à indiquer que l'élément est initialement transparent.
Vous pouvez désactiver cette indication à tout moment. Cliquez sur l'icône Wix Studio 
, survolez Afficher et cliquez sur Éléments transparents.
, survolez Afficher et cliquez sur Éléments transparents.FAQ
Cliquez ci-dessous pour en savoir plus sur la création d'interactions.
À quoi cela ressemble-t-il lorsqu'un élément déclenche sa propre animation ?
À quoi ressemble une interaction entre différents éléments ?
Un élément peut-il déclencher plusieurs autres éléments ?
Un même élément peut-il avoir plusieurs animations ?
Cela vous a-t-il aidé ?
|