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 Modifier le composant WebPart pour ouvrir le volet de propriétés.
- Dans le groupe Apparence, activez Effet de survol. Trois autres contrôles apparaissent sous le bouton bascule.
- Choisissez l'effet dans la liste Effet.
- Réglez l'intensité avec le curseur situé sous la liste. Son libellé - Pourcentage (%), degrés ou pixels - dépend de l'effet.
- Réglez la Durée 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 |
|---|---|
| Luminosité | La vignette s'assombrit. 70–85 % donne un aspect « enfoncé » classique ; 0 % donne du noir. |
| Contraste | 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. |
| Opacité | 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 |
|---|---|
| Nuances de gris | Les couleurs sont supprimées ; 100 % donne une vignette en noir et blanc. |
| Sépia | La vignette prend une teinte brunâtre chaude ; 100 % donne une vignette entièrement sépia. |
| Inversion des couleurs | Les couleurs sont inversées ; 100 % transforme une vignette blanche en noir. 20–30 % donne un changement perceptible mais pas choquant. |
Effets avec d'autres unités.
| Effet | Unité et comportement |
|---|---|
| Rotation de la teinte | Degrés, 0–360. Décale toutes les couleurs de la vignette sur le cercle chromatique : 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. |
| Flou | 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 Luminosité à 70 % à Rotation de la teinte, puis revenir en arrière, rétablit les 70 %.
Durée
Durée 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 - Réduire les animations sous macOS et iOS, Effets d’animation 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 : Luminosité 80 %, Durée 0,2 s. Fonctionne sur les vignettes colorées, sur les photographies et dans les thèmes sombres.
- Subtil, pour les panneaux monochromes : Contraste 60 % ou Saturation 40 %, Durée 0,3 s. La vignette survolée s'adoucit sans changer de couleur.
- Ludique : Rotation de la teinte 20°, Durée 0,4 s. La vignette passe à une teinte voisine, puis revient.
- Vignettes avec photo : Opacité 85 % ou Luminosité 75 % ; Flou 1 px donne un changement de netteté semblable à celui d'un objectif.
- Évitez Inversion des couleurs et Rotation de la teinte à 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 Luminosité sous 50 % ou Opacité 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 Apparence sont décrits dans KB10042. Comment ajouter et configurer le composant WebPart Smart Tiles.
En savoir plus sur le produit : https://vitextra.com/fr/products/smart-tiles
