Smart Tiles Introduction
Une vignette qui réagit lorsque le pointeur l'atteint indique au visiteur « ceci est un bouton » avant même qu'il clique. Smart Tiles propose neuf réactions de ce type, d'un léger assombrissement à une inversion complète des couleurs, chacune avec une intensité réglable et un temps de transition. Cet article décrit les paramètres, ce que fait chaque effet et quelles combinaisons fonctionnent bien.
Activer l'effet
- Ouvrez la page en mode édition et cliquez sur Edit web part pour ouvrir le volet de propriétés.
- Dans le groupe Appearance, activez Hover Effect. Trois autres contrôles apparaissent sous le bouton bascule.
- Choisissez l'effet dans la liste Effect.
- Réglez l'intensité avec le curseur situé sous la liste. Son libellé — Percentage (%), degrees ou pixels — dépend de l'effet.
- Réglez la Duration de la transition, de 0 à 5 secondes par pas de 0,1.
Déplacez le pointeur sur une vignette de la page pour voir le résultat ; les paramètres sont appliqués immédiatement.
Les neuf effets
Les effets sont les filtres d'image du navigateur appliqués à toute la vignette — arrière-plan, icône et textes ensemble. Ils se répartissent en deux groupes selon la signification de leur intensité.
Effets pour lesquels 100 % correspond à l'original. Des valeurs plus faibles réduisent la propriété ; la vignette redevient normale lorsque le pointeur la quitte.
| Effet | À des valeurs plus faibles |
|---|---|
| Brightness | La vignette s'assombrit. 70–85 % donne un aspect « enfoncé » classique ; 0 % donne du noir. |
| Contrast | Les couleurs s'aplatissent vers le gris. 50 % donne une vignette douce et délavée. |
| Saturation | Les couleurs se fanent vers le gris tout en conservant la luminosité. 0 % donne une vignette monochrome. |
| Opacity | La vignette devient translucide et la page transparaît. 70–80 % est subtil ; 0 % fait disparaître la vignette. |
Effets pour lesquels 0 % correspond à l'original. Des valeurs plus élevées appliquent davantage l'effet.
| Effet | À des valeurs plus élevées |
|---|---|
| Grayscale | Les couleurs sont supprimées ; 100 % donne une vignette en noir et blanc. |
| Sepia | La vignette prend une teinte brunâtre chaude ; 100 % donne une vignette entièrement sépia. |
| Color Inverting | Les couleurs sont inversées ; 100 % transforme une vignette blanche en noir et le bleu en orange. 20–30 % donne un changement perceptible mais pas choquant. |
Effets avec d'autres unités.
| Effet | Unité et comportement |
|---|---|
| Hue Rotate | Degrés, 0–360. Décale toutes les couleurs de la vignette sur le cercle chromatique : à 180°, le bleu devient orange et le vert devient magenta ; 360° correspond de nouveau à l'original. De petites valeurs (15–30°) donnent un décalage vivant qui reste dans la même famille que la couleur d'origine. |
| Blur | Pixels, 0–20. Adoucit la vignette ; 1–2 px donne un léger changement de netteté, 5 px et plus rend le titre illisible. |
L'intensité de chaque unité est mémorisée séparément : passer de Brightness à 70 % à Hue Rotate, puis revenir en arrière, rétablit les 70 %.
Duration
Duration est le temps que met la vignette pour passer de son aspect normal à l'effet — et pour revenir à l'aspect normal lorsque le pointeur la quitte. À 0, le changement est instantané ; 0,2–0,4 s donne une impression de réactivité ; au-delà de 1 s, cela semble lent pour de la navigation. La transition s'effectue dans les deux sens : une vignette ne « saute » donc jamais brusquement à son état initial.
Clavier et accessibilité
L'effet est appliqué non seulement sous le pointeur, mais aussi lorsqu'une vignette reçoit le focus du clavier : les visiteurs qui naviguent avec la touche Tab obtiennent ainsi le même retour visuel que ceux qui utilisent une souris.
Lorsque le système d'exploitation est configuré pour réduire les animations — Reduce motion sous macOS et iOS, Animation effects désactivé sous Windows —, la transition est ignorée : l'effet apparaît quand même, mais instantanément, sans animation.
📝 Remarque
Les effets sont définis par composant WebPart. Deux composants WebPart Smart Tiles sur la même page peuvent utiliser des effets différents, ou l'un d'eux aucun effet.
Réglages recommandés
- Choix par défaut : Brightness 80 %, Duration 0,2 s. Fonctionne sur les vignettes colorées, sur les photographies et dans les thèmes sombres.
- Subtil, pour les panneaux monochromes : Contrast 60 % ou Saturation 40 %, Duration 0,3 s. La vignette survolée s'adoucit sans changer de couleur.
- Ludique : Hue Rotate 20°, Duration 0,4 s. La vignette passe à une teinte voisine, puis revient.
- Vignettes avec photo : Opacity 85 % ou Brightness 75 % ; Blur 1 px donne un changement de netteté semblable à celui d'un objectif.
- Évitez Color Inverting et Hue Rotate à des valeurs élevées sur les vignettes aux couleurs de la marque — la vignette survolée afficherait des couleurs qui ne sont pas les vôtres.
❗ Important
L'effet modifie toute la vignette, y compris le texte. Vérifiez que le titre reste lisible à l'intensité choisie — avec Brightness sous 50 % ou Opacity sous 60 %, le texte blanc sur une vignette sombre devient difficile à lire au moment précis où le visiteur s'apprête à cliquer.
💡 Astuce
Les autres paramètres du groupe Appearance sont décrits dans KB10042. Comment ajouter et configurer le composant WebPart Smart Tiles.
