Comment utiliser l'animation de survol dans la conception Web
Couleur au survol
Définir la couleur de l'élément au survol aide à attirer l'attention des visiteurs sur un élément et donne une impression et un concept de l'idée souhaitée sur sa signification. Vous pouvez changer la couleur de l'élément au survol. Pour cela, sélectionnez un élément et, dans le panneau de propriétés, accédez à la section Animation activée, cliquez sur le lien Survol, puis sur la case à cocher Survol. Modifiez la Couleur à appliquer au survol.
Frontière en vol stationnaire
La bordure d'élément est également importante pour améliorer l'interaction d'Elements et attirer l'attention des visiteurs. Vous pouvez modifier la bordure de survol pour des éléments tels que l'icône, l'image, la forme, le groupe, la grille, etc. Dans la section Survol du panneau de propriétés, cochez la case Survol. Modifiez la bordure à afficher lors du survol d'un élément.
Rayon en vol stationnaire
Pour les images et les formes, les groupes et les cellules de la grille, vous pouvez modifier le rayon au survol. Les éléments deviennent attrayants avec cette propriété, incitant à l'action (boutons Acheter maintenant, Lire plus, etc.) et rendant votre conception unique. Dans la section Survol du panneau de propriétés, activez le mode Survol. Faites glisser le curseur Rayon pour définir sa valeur Au survol.
Ombre au survol
Vous pouvez modifier la propriété Shadow sur Hover pour les textes et autres éléments. Pour définir l'ombre au survol, ajoutez ou sélectionnez un élément. Ensuite, cliquez sur le lien Hover du panneau de propriétés, cochez la case Hover, modifiez l'ombre à appliquer au Hover. Vous pouvez commencer avec l'un des préréglages d'ombre et le personnaliser si nécessaire.
Transparence au survol
Vous pouvez modifier la transparence des éléments au survol pour ajouter de l'interaction et de l'attractivité à la conception du site Web. Dans le panneau de propriétés, cliquez sur le lien Survol et cochez la case Survol. Définissez la transparence à appliquer au survol. Cliquez quelque part dans le bloc pour désélectionner l'élément. Survolez l'élément pour tester le changement de transparence.
Se déplacer au survol
Les effets d'animation de survol utilisés sur les sites Web modernes sont devenus plus sophistiqués. L'un des exemples d'effets est le déplacement d'élément au survol. Vous pouvez ajouter le déplacement d'un élément au survol. Ajoutez ou sélectionnez un élément et accédez au panneau de propriétés. Cliquez sur le lien Survoler puis cochez la case Survoler. Définissez les valeurs de la propriété Déplacer X, Y.
Rotation au survol
La rotation en vol stationnaire est le prochain effet important et complexe. Pour faire pivoter un élément au survol, ajoutez ou sélectionnez un élément et accédez au panneau de propriétés. Accédez à et cliquez sur le lien Survol dans la section Animation activée, puis cochez la case Survol. Utilisez le curseur pour définir l'angle de rotation ou entrez la valeur dans le champ de saisie. Les valeurs prises en charge pour l'angle de rotation sont comprises entre 0 et 359.
Échelle au survol
La mise à l'échelle peut ressembler à la réaction la plus naturelle sur votre curseur. Par conséquent, il peut être très populaire. Vous pouvez facilement ajouter Scale On Hover à votre site Web. Pour cela, ajoutez ou sélectionnez un élément, puis accédez au panneau de propriétés. Cliquez sur le lien Survol de la section Animation activée et cochez la case Survol. Faites défiler jusqu'aux propriétés Échelle, Rotation et Déplacer. La taille réelle est égale à 100.
Durée du survol
Vous pouvez gérer l'animation de survol en définissant sa durée. Définir la durée de l'animation au survol, ajoutez ou sélectionnez un élément et accédez au panneau de propriétés. Sélectionnez le lien Survol de la section Animation sur et cochez la case Survol. Les valeurs prises en charge pour le curseur vont de 10 à 200, et vous pouvez entrer un nombre plus grand dans ce champ si nécessaire.
Couleur d'arrière-plan en dégradé au survol
En ajoutant l'animation de survol à une forme avec un arrière-plan, vous voudrez peut-être changer le remplissage solide en quelque chose d'attrayant, comme un dégradé. Pour cela, sélectionnez une forme et accédez au lien de survol du panneau de propriétés. Cliquez sur le lien Animation On - Hover et cochez la case Hover. Sélectionnez le type de dégradé pour l'arrière-plan et définissez le dégradé.
Image d'arrière-plan à l'image au survol
Vous pouvez également changer le remplissage en images et même changer une image d'arrière-plan en une autre en survolant, ce qui peut beaucoup divertir vos visiteurs. Sélectionnez une forme et ajoutez une image pour l'arrière-plan. Allez dans la section Animation On du panneau de propriétés et cliquez sur Hover. Activez l'effet de survol et sélectionnez l'image comme type d'arrière-plan. Choisissez l'image de survol. Test.