Comment faire une animation de suivi de souris sur Webflow ?

Créer un effet de suivi de mouvement de souris sur votre site Webflow peut ajouter une touche d'interactivité et d'engagement pour les visiteurs. Dans cet article, nous allons vous montrer comment mettre en place cet effet en utilisant les interactions Webflow, en prenant l'exemple d'yeux qui suivent la souris.

Résumé de la Méthode

Pour créer un effet de suivi de mouvement de souris sur Webflow, vous allez utiliser les interactions pour détecter le mouvement de la souris sur un élément spécifique. Ensuite, vous appliquerez des animations qui déplaceront un élément en fonction de la position de la souris.

Étape 1 : Préparation de l'Élément

1. Sélectionner la Zone d'Interaction :
   • Choisissez la zone dans laquelle vous souhaitez que la souris déclenche l'animation.
   • Par exemple, sélectionnez un div contenant l'image avec les yeux.
2. Ajouter une Classe CSS :
   • Donnez une classe à cette zone, par exemple interactive-zone.

Étape 2 : Configurer l'Interaction de la Souris

1. Accéder aux Interactions :
   • Allez dans le panneau des interactions de Webflow.
   • Cliquez sur + pour ajouter une nouvelle interaction et sélectionnez Mouse Move Over Element.
2. Créer une Animation de Souris :
   • Choisissez Play Mouse Animation.
   • Désactivez l'animation pour les tablettes et les mobiles pour améliorer la performance sur ces dispositifs.

Étape 3 : Configurer les Animations

1. Configurer l'Axe des X :
   • Sélectionnez les yeux (ou l'élément que vous souhaitez animer).
   • Ajoutez une animation de mouvement (Move) pour l'axe des X.
   • Définissez les valeurs de mouvement à 0% et 100% pour correspondre à la gauche et à la droite de l'élément.
   • Par exemple, à 0% mettez -20% et à 100% mettez 20%.
2. Configurer l'Axe des Y :
   • Ajoutez une autre animation de mouvement pour l'axe des Y.
   • Définissez les valeurs de mouvement à 0% et 100% pour correspondre au haut et au bas de l'élément.
   • Par exemple, à 0% mettez -15% et à 100% mettez 15%.

Étape 4 : Ajuster la Fluidité de l'Animation

1. Ajuster le Smoothing :
   • Utilisez l'option Smoothing pour rendre l'animation plus fluide et naturelle.
   • Par exemple, réglez la valeur à 76% pour un léger retard entre le mouvement de la souris et les yeux.

‍

En suivant ces étapes, vous pouvez facilement créer un effet de suivi de mouvement de souris sur Webflow. Cet effet peut être utilisé pour divers éléments interactifs sur votre site, ajoutant ainsi une dimension d'engagement supplémentaire pour vos visiteurs.