Star Rating
Cinq étoiles de notation avec prévisualisation dynamique au survol : les étoiles se remplissent jusqu'au curseur avant confirmation du clic. Chaque étoile cliquée jaillit avec un pop élastique. Accessibilité clavier complète.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0367-root (250 px de haut, fond rgb(26, 26, 36)) centre le groupe d'étoiles dans un div .mi-star-group avec role="radiogroup" et aria-label="Note sur 5". Chaque étoile est un div avec role="radio", aria-checked="false" et un attribut data-value (1 à 5). Le SVG de chaque étoile (polygon à 5 branches) démarre en contour gris (stroke visible, fill transparent).
Au survol, le script met à jour la classe .hover sur toutes les étoiles dont la valeur est inférieure ou égale à la valeur de l'étoile survolée : visuellement, les étoiles jusqu'au curseur passent en jaune. Ce n'est qu'une prévisualisation ; au départ de la souris (mouseleave), les étoiles retrouvent l'état noté (ou reviennent toutes en gris si aucune note n'a été donnée). Au clic, le script appelle setRating(value) : il retire la classe .selected de toutes les étoiles, l'ajoute aux étoiles dont la valeur est inférieure ou égale à la valeur cliquée, met à jour aria-checked (true sur les étoiles notées, false sur les autres) et met à jour le label de résumé.
L'animation de clic (@keyframes miStarPop) gonfle l'étoile à 1,4× puis revient à l'unité avec une cubic-bezier(0.17, 0.89, 0.32, 1.49) qui donne le rebond. Elle ne s'applique qu'à l'étoile cliquée (pas à toute la rangée). La navigation au clavier utilise le roving tabindex : seule l'étoile active a tabindex="0", les autres ont tabindex="-1". Les flèches gauche/droite déplacent le focus et donnent la note ; Entrée/Espace confirment la note sur l'étoile en focus.
Accessibilité
- Rôle radiogroup : le groupe d'étoiles utilise
role="radiogroup"et chaque étoile arole="radio"avecaria-checked. Un lecteur d'écran annonce la rangée comme un groupe de boutons radio et indique l'état sélectionné de chaque étoile. - Clavier : Tab atteint la première étoile active, les flèches gauche/droite naviguent entre les étoiles en mettant à jour le focus (roving tabindex). Entrée ou Espace confirme la note sur l'étoile en focus. Aucune souris n'est nécessaire pour noter.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, l'animation pop (@keyframes miStarPop) est désactivée. Les transitions de couleur des étoiles restent actives : l'état survol et l'état noté restent lisibles visuellement. - Label de résumé : un
spanadjacent affiche la note choisie en texte (ex. : 4 étoiles sur 5). Ce texte est lu par les lecteurs d'écran et permet aux utilisateurs daltoniens de confirmer leur note.
Compatibilité navigateur
CSS (animations, transitions SVG) + 0,8 Ko de JavaScript (querySelectorAll, addEventListener, roving tabindex, matchMedia), aucune dépendance. Vérifié dans Chromium 151 : prévisualisation au survol, notation au clic, navigation clavier avec flèches, aria-checked mis à jour, pop uniquement sur l'étoile cliquée, deux copies indépendantes, mouvement réduit sans pop, 0 erreur.
Sans JavaScript, les étoiles sont statiques. Sans transitions CSS, les étoiles changent de couleur instantanément sans animation. Sur mobile tactile, il n'y a pas de survol ; le toucher donne directement la note.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0367-root">
<div class="mi-star-scene">
<div class="mi-star-group" role="radiogroup" aria-label="Note sur 5">
<div class="mi-star" role="radio" aria-checked="false" tabindex="0" data-value="1">
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</div>
<!-- répéter pour les étoiles 2 à 5 avec tabindex="-1" -->
</div>
<span class="mi-star-label">Aucune note</span>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Couleur des étoiles notées (CSS — fill et stroke de .mi-star.selected svg et .mi-star.hover svg) |
Jaune #fbbf24 |
Passez à orange (#f97316) pour un style plus chaud, ou violet (#8b5cf6) pour une charte spécifique. La couleur de prévisualisation au survol et la couleur de notation doivent correspondre. |
Nombre d'étoiles (HTML — nombre de divs .mi-star dans le groupe) |
5 étoiles | Passez à 10 étoiles pour une granularité plus fine, ou 3 pour une notation simple. Mettez à jour les data-value (1, 2, 3…) et l'aria-label du groupe (Note sur 10). |
Taille des étoiles (CSS — width / height de .mi-star) |
32 px | Réduisez à 24 px pour une rangée compacte dans un tableau ; agrandissez à 48 px pour un usage proéminent. |
Label de résumé (HTML — span.mi-star-label) |
Aucune note | Le script met à jour ce texte via label.textContent. Adaptez le message de base et le format de la note (ex. : 3,5 / 5). |
FAQ
click). Le prévisualisation est une fonctionnalité de bureau uniquement. Sur mobile, la note est donnée en un toucher, ce qui reste utilisable.setRating(0) (aucune étoile sélectionnée). Le script retire alors toutes les classes .selected et met les aria-checked à false.
