Comment utiliser l'animation de survol dans la conception Web
Couleur au survol
Le réglage de la couleur de l'élément au survol aide à concentrer 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 des propriétés, accédez à la section Animation activée, cliquez sur le lien Hover, puis sur la case Hover. Modifiez la couleur à appliquer au survol.
Bordure au survol
La bordure des éléments est également importante pour améliorer l'interaction des éléments 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 de survol
Pour les images et les formes, les groupes et les cellules de grille, vous pouvez modifier le rayon au survol. Les éléments deviennent attrayants avec cette propriété, incitant à l'action (boutons Acheter maintenant, Lire la suite, etc.) et rendant votre conception unique. Dans la section Hover du panneau de propriétés, activez le mode Hover. 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 des propriétés, cliquez sur le lien Hover et cochez la case Hover. 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.
Déplacer en 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 mouvement 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 des propriétés. Cliquez sur le lien Hover puis cochez la case Hover. Définissez les valeurs de la propriété Déplacer X, Y.
Rotation au survol
La rotation au survol 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 des propriétés. Accédez à et cliquez sur le lien Hover dans la section Animation On, puis cochez la case Hover. 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 le Scale On Hover à votre site Web. Pour cela, ajoutez ou sélectionnez un élément, puis accédez au panneau des propriétés. Cliquez sur le lien Hover de la section Animation On et cochez la case Hover. Faites défiler jusqu'aux propriétés Échelle, Rotation et Déplacement. 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éfinissez la durée de l'animation au survol, ajoutez ou sélectionnez un élément et accédez au panneau des propriétés. Sélectionnez le lien Hover de la section Animation On et cochez la case Hover. Les valeurs prises en charge pour le curseur sont comprises entre 10 et 200, et vous pouvez entrer un nombre plus important dans ce champ si nécessaire.
Couleur d'arrière-plan au dégradé au survol
En ajoutant l'animation de survol à une forme avec un arrière-plan, vous souhaiterez 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 des propriétés. Cliquez sur le lien Animation On -> Hover et cochez la case Hover. Sélectionnez le type de dégradé pour le fond et définissez le dégradé.
Image d'arrière-plan à image au survol
Vous pouvez également modifier le remplissage en images et même changer une image d'arrière-plan en une autre tout en survolant, ce qui peut beaucoup divertir vos visiteurs. Sélectionnez une forme et ajoutez une image pour l'arrière-plan. Accédez à la section Animation activée du panneau Propriétés et cliquez sur Survoler. Activez l'effet Survol et sélectionnez l'image comme type de fond. Choisissez l'image de survol. Test.