Éditeur Studio : Ajouter une interaction de clique ou de survol prédéfinie
Temps de lecture : 6 min
Ajoutez 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 (ex. Augmentez, déplacez, fanez) et modifiez-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. Dans les deux cas, vous avez le contrôle total de l'aspect, de la convivialité et du moment de l'efficacité.
É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'il déclenche une animation différente 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
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 clique.
Remarque :
Les animations disponibles dépendent de l'élément que vous sélectionnez.
Pour configurer l'interaction :
- (Dans le panneau de configuration) Choisissez ce qui se passe Au survol / au clique:
- Démarrer l'animation : Cliquez / 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 clique.
- 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é).
- 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.
- Sélectionnez une animation :
- Cliquez sur l'onglet Prédéfinies .
- Choisissez une animation dans la liste.
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.Étape 3 | (Facultatif) Ajustez l'animation
Après avoir choisi l'animation que vous souhaitez, personnalisez-la pour obtenir l'effet souhaité. Vous pouvez contrôler des paramètres tels que la durée, le délai et le comportement pour rendre l'animation vraiment efficace.
Remarque :
Les paramètres disponibles dépendent de l'animation prédéfinie que vous choisissez.
Pour ajuster l'animation :
- (Dans l'inspecteur) Cliquez sur Ajuster l'animation en bas de l'écran.
- 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 entre et sort dans le menu déroulant.
- Échelle : Sélectionnez de l'agrandissement ou de la réduction de l'élément.
- Angle : Modifiez l'angle de mouvement.
- Distance : Éloigne ou s'approche l'élément de sa position par défaut sur la page.
- Direction : Modifiez la direction dans laquelle l'élément pivote.
- (Facultatif) Cliquez sur Aperçu pour voir à quoi ressemble l'animation et effectuer des ajustements, si nécessaire.
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é ?
|