Faire réagir les éléments au survol.
Faites changer un élément quand un visiteur le pointe : une boîte qui se soulève, un bouton qui s’assombrit, une image qui s’éclaircit. Vous définissez l’aspect de repos dans le panneau Style et l’aspect de survol dans son jumeau, le panneau Hover style. L’exemple construit une boîte de texte grise qui se soulève au survol.
La vidéo donne à une zone de texte un arrière-plan, une marge intérieure et une ombre qui s’approfondit au survol.
Construire la boîte de texte
- Cliquez sur + dans la zone de contenu et choisissez Section dans l’onglet Layout.
- Cliquez sur + sur la section et choisissez Row.
- Cliquez l’icône de grille sur la ligne, choisissez la tuile à trois colonnes égales et cliquez sur Save.
- Cliquez sur + dans la première colonne et choisissez Text dans l’onglet Content.
- Saisissez « Open day », mettez-le en Heading 3 et ajoutez une ligne en dessous.
Définir le style de repos
- Dans le même dialogue de réglages, ouvrez le panneau Style.
- Choisissez un Background gris clair.
- Dans le modèle de boîte, mettez les côtés haut, gauche et bas de Padding à 24.
- Réglez Border radius sur 8.
- Réglez Drop shadow sur 1.
Définir le style de survol
- Ouvrez le panneau Hover style.
- Réglez Drop shadow sur 4.
- Cliquez sur Save.
- Cliquez sur Save sur la barre d’outils de DXPR Builder.
- Ouvrez le menu d’affichage, l’icône en forme d’œil sur la barre d’outils, et choisissez Preview.
- Amenez le pointeur sur la boîte de texte.
Ce que vous voyez
Au repos, la boîte de texte est grise avec des coins arrondis et une ombre légère. Quand le pointeur l’atteint, l’ombre s’approfondit et la boîte semble se soulever ; quand le pointeur part, elle se repose. Le changement d’ombre est animé. Les autres changements de survol, comme une nouvelle couleur, basculent aussitôt.
Paramètres
Le panneau Hover style contient les mêmes champs que le panneau Style. Un champ laissé vide garde la valeur de repos.
| Champ | Usage au survol |
|---|---|
| Margin, Border, Padding (modèle de boîte) | Décaler, encadrer ou agrandir l’élément |
| Font color | Mettre le texte en valeur |
| Border color | Accentuer la bordure |
| Background | Changer le remplissage |
| Background image, Background style, Background position | Changer l’image ou la déplacer |
| Border style | Afficher une bordure |
| Font size | Agrandir le texte |
| Border radius | Arrondir les coins |
| Opacity | Révéler ou atténuer l’élément |
| Drop shadow | Ajouter de la profondeur, de 1 à 5 |
Motifs courants
- Card lift : Drop shadow 1 dans Style, 4 dans Hover style.
- Picture reveal : Opacity 0.7 dans Style, 1 dans Hover style.
- Button colour change : un Background plus sombre dans Hover style.
- Border highlight : Border style Solid avec une Border color claire dans Style, une Border color d’accentuation dans Hover style.
Si vous ne voyez pas l’effet
- La boîte de texte ne change pas quand vous la pointez. La valeur de survol égale la valeur de repos, ou vous l’avez définie dans le panneau Style par erreur. Ouvrez More > Settings et augmentez Drop shadow dans le panneau Hover style.
- L’effet est dur à juger pendant la modification. En mode modification, l’élément montre aussi sa barre de contrôle et son contour quand vous le pointez. Choisissez Preview dans le menu d’affichage et pointez-le de nouveau.
- Opacity, Font size ou Border radius à 0 est sans effet. Une valeur de 0 compte comme non définie pour ces trois champs. Pour faire presque disparaître un élément en fondu, utilisez une Opacity de 0.01.
Et ensuite ?
- Animer les éléments quand ils défilent à l’écran : ajouter du mouvement au-delà du survol.
- Styliser vos cartes : combiner le survol avec les couleurs et ombres des cartes.