Modèle de notation des étoiles animées

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 September 2023

Formulaire de connexion et d'inscription

HTML

<!doctype html>
<html lang="en">
<head>
  <title>Animated Stars Rating</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
	<form class="rating">
		<div class="rating__stars">
			<input id="rating-1" class="rating__input rating__input-1" type="radio" name="rating" value="1">
			<input id="rating-2" class="rating__input rating__input-2" type="radio" name="rating" value="2">
			<input id="rating-3" class="rating__input rating__input-3" type="radio" name="rating" value="3">
			<input id="rating-4" class="rating__input rating__input-4" type="radio" name="rating" value="4">
			<input id="rating-5" class="rating__input rating__input-5" type="radio" name="rating" value="5">
			<label class="rating__label" for="rating-1">
				<svg class="rating__star" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
					<g transform="translate(16,16)">
						<circle class="rating__star-ring" fill="none" stroke="#000" stroke-width="16" r="8" transform="scale(0)" />
					</g>
					<g stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<g transform="translate(16,16) rotate(180)">
							<polygon class="rating__star-stroke" points="0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07" fill="none" />
							<polygon class="rating__star-fill" points="0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07" fill="#000" />
						</g>
						<g transform="translate(16,16)" stroke-dasharray="12 12" stroke-dashoffset="12">
							<polyline class="rating__star-line" transform="rotate(0)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(72)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(144)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(216)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(288)" points="0 4,0 16" />
						</g>
					</g>
				</svg>
				<span class="rating__sr">1 star—Terrible</span>
			</label>
			<label class="rating__label" for="rating-2">
				<svg class="rating__star" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
					<g transform="translate(16,16)">
						<circle class="rating__star-ring" fill="none" stroke="#000" stroke-width="16" r="8" transform="scale(0)" />
					</g>
					<g stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<g transform="translate(16,16) rotate(180)">
							<polygon class="rating__star-stroke" points="0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07" fill="none" />
							<polygon class="rating__star-fill" points="0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07" fill="#000" />
						</g>
						<g transform="translate(16,16)" stroke-dasharray="12 12" stroke-dashoffset="12">
							<polyline class="rating__star-line" transform="rotate(0)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(72)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(144)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(216)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(288)" points="0 4,0 16" />
						</g>
					</g>
				</svg>
				<span class="rating__sr">2 stars—Bad</span>
			</label>
			<label class="rating__label" for="rating-3">
				<svg class="rating__star" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
					<g transform="translate(16,16)">
						<circle class="rating__star-ring" fill="none" stroke="#000" stroke-width="16" r="8" transform="scale(0)" />
					</g>
					<g stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<g transform="translate(16,16) rotate(180)">
							<polygon class="rating__star-stroke" points="0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07" fill="none" />
							<polygon class="rating__star-fill" points="0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07" fill="#000" />
						</g>
						<g transform="translate(16,16)" stroke-dasharray="12 12" stroke-dashoffset="12">
							<polyline class="rating__star-line" transform="rotate(0)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(72)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(144)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(216)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(288)" points="0 4,0 16" />
						</g>
					</g>
				</svg>
				<span class="rating__sr">3 stars—OK</span>
			</label>
			<label class="rating__label" for="rating-4">
				<svg class="rating__star" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
					<g transform="translate(16,16)">
						<circle class="rating__star-ring" fill="none" stroke="#000" stroke-width="16" r="8" transform="scale(0)" />
					</g>
					<g stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<g transform="translate(16,16) rotate(180)">
							<polygon class="rating__star-stroke" points="0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07" fill="none" />
							<polygon class="rating__star-fill" points="0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07" fill="#000" />
						</g>
						<g transform="translate(16,16)" stroke-dasharray="12 12" stroke-dashoffset="12">
							<polyline class="rating__star-line" transform="rotate(0)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(72)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(144)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(216)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(288)" points="0 4,0 16" />
						</g>
					</g>
				</svg>
				<span class="rating__sr">4 stars—Good</span>
			</label>
			<label class="rating__label" for="rating-5">
				<svg class="rating__star" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
					<g transform="translate(16,16)">
						<circle class="rating__star-ring" fill="none" stroke="#000" stroke-width="16" r="8" transform="scale(0)" />
					</g>
					<g stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<g transform="translate(16,16) rotate(180)">
							<polygon class="rating__star-stroke" points="0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07" fill="none" />
							<polygon class="rating__star-fill" points="0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07" fill="#000" />
						</g>
						<g transform="translate(16,16)" stroke-dasharray="12 12" stroke-dashoffset="12">
							<polyline class="rating__star-line" transform="rotate(0)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(72)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(144)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(216)" points="0 4,0 16" />
							<polyline class="rating__star-line" transform="rotate(288)" points="0 4,0 16" />
						</g>
					</g>
				</svg>
				<span class="rating__sr">5 stars—Excellent</span>
			</label>
			<p class="rating__display" data-rating="1" hidden>Terrible</p>
			<p class="rating__display" data-rating="2" hidden>Bad</p>
			<p class="rating__display" data-rating="3" hidden>OK</p>
			<p class="rating__display" data-rating="4" hidden>Good</p>
			<p class="rating__display" data-rating="5" hidden>Excellent</p>
		</div>
	</form>
	<script src="/js/main.js"></script>
</body>
</html>

CSS

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #e3e4e8;
  --fg: #17181c;
  --primary: #255ff4;
  --yellow: #f4a825;
  --yellow-t: rgba(244, 168, 37, 0);
  --bezier: cubic-bezier(0.42,0,0.58,1);
  --trans-dur: 0.3s;
  font-size: calc(24px + (30 - 24) * (100vw - 320px) / (1280 - 320));
}

body {
  background-color: var(--bg);
  color: var(--fg);
  font: 1em/1.5 "DM Sans", sans-serif;
  display: flex;
  height: 100vh;
  transition: background-color var(--trans-dur), color var(--trans-dur);
}

.rating {
  margin: auto;
}
.rating__display {
  font-size: 1em;
  font-weight: 500;
  min-height: 1.25em;
  position: absolute;
  top: 100%;
  width: 100%;
  text-align: center;
}
.rating__stars {
  display: flex;
  padding-bottom: 0.375em;
  position: relative;
}
.rating__star {
  display: block;
  overflow: visible;
  pointer-events: none;
  width: 2em;
  height: 2em;
}
.rating__star-ring, .rating__star-fill, .rating__star-line, .rating__star-stroke {
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.rating__star-ring, .rating__star-fill, .rating__star-line {
  stroke: var(--yellow);
}
.rating__star-fill {
  fill: var(--yellow);
  transform: scale(0);
  transition: fill var(--trans-dur) var(--bezier), transform var(--trans-dur) var(--bezier);
}
.rating__star-line {
  stroke-dasharray: 12 13;
  stroke-dashoffset: -13;
}
.rating__star-stroke {
  stroke: #c7cad1;
  transition: stroke var(--trans-dur);
}
.rating__label {
  cursor: pointer;
  padding: 0.125em;
}
.rating__label--delay1 .rating__star-ring, .rating__label--delay1 .rating__star-fill, .rating__label--delay1 .rating__star-line, .rating__label--delay1 .rating__star-stroke {
  animation-delay: 0.05s;
}
.rating__label--delay2 .rating__star-ring, .rating__label--delay2 .rating__star-fill, .rating__label--delay2 .rating__star-line, .rating__label--delay2 .rating__star-stroke {
  animation-delay: 0.1s;
}
.rating__label--delay3 .rating__star-ring, .rating__label--delay3 .rating__star-fill, .rating__label--delay3 .rating__star-line, .rating__label--delay3 .rating__star-stroke {
  animation-delay: 0.15s;
}
.rating__label--delay4 .rating__star-ring, .rating__label--delay4 .rating__star-fill, .rating__label--delay4 .rating__star-line, .rating__label--delay4 .rating__star-stroke {
  animation-delay: 0.2s;
}
.rating__input {
  position: absolute;
  -webkit-appearance: none;
  appearance: none;
}
.rating__input:hover ~ [data-rating]:not([hidden]) {
  display: none;
}
.rating__input-1:hover ~ [data-rating="1"][hidden], .rating__input-2:hover ~ [data-rating="2"][hidden], .rating__input-3:hover ~ [data-rating="3"][hidden], .rating__input-4:hover ~ [data-rating="4"][hidden], .rating__input-5:hover ~ [data-rating="5"][hidden], .rating__input:checked:hover ~ [data-rating]:not([hidden]) {
  display: block;
}
.rating__input-1:hover ~ .rating__label:first-of-type .rating__star-stroke, .rating__input-2:hover ~ .rating__label:nth-of-type(-n + 2) .rating__star-stroke, .rating__input-3:hover ~ .rating__label:nth-of-type(-n + 3) .rating__star-stroke, .rating__input-4:hover ~ .rating__label:nth-of-type(-n + 4) .rating__star-stroke, .rating__input-5:hover ~ .rating__label:nth-of-type(-n + 5) .rating__star-stroke {
  stroke: var(--yellow);
  transform: scale(1);
}
.rating__input-1:checked ~ .rating__label:first-of-type .rating__star-ring, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-ring, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-ring, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-ring, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-ring {
  animation-name: starRing;
}
.rating__input-1:checked ~ .rating__label:first-of-type .rating__star-stroke, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-stroke, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-stroke, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-stroke, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-stroke {
  animation-name: starStroke;
}
.rating__input-1:checked ~ .rating__label:first-of-type .rating__star-line, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-line, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-line, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-line, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-line {
  animation-name: starLine;
}
.rating__input-1:checked ~ .rating__label:first-of-type .rating__star-fill, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-fill, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-fill, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-fill, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-fill {
  animation-name: starFill;
}
.rating__input-1:not(:checked):hover ~ .rating__label:first-of-type .rating__star-fill, .rating__input-2:not(:checked):hover ~ .rating__label:nth-of-type(2) .rating__star-fill, .rating__input-3:not(:checked):hover ~ .rating__label:nth-of-type(3) .rating__star-fill, .rating__input-4:not(:checked):hover ~ .rating__label:nth-of-type(4) .rating__star-fill, .rating__input-5:not(:checked):hover ~ .rating__label:nth-of-type(5) .rating__star-fill {
  fill: var(--yellow-t);
}
.rating__sr {
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17181c;
    --fg: #e3e4e8;
  }

.rating {
    margin: auto;
  }
  .rating__star-stroke {
    stroke: #454954;
  }
}
@keyframes starRing {
  from, 20% {
    animation-timing-function: ease-in;
    opacity: 1;
    r: 8px;
    stroke-width: 16px;
    transform: scale(0);
  }
  35% {
    animation-timing-function: ease-out;
    opacity: 0.5;
    r: 8px;
    stroke-width: 16px;
    transform: scale(1);
  }
  50%, to {
    opacity: 0;
    r: 16px;
    stroke-width: 0;
    transform: scale(1);
  }
}
@keyframes starFill {
  from, 40% {
    animation-timing-function: ease-out;
    transform: scale(0);
  }
  60% {
    animation-timing-function: ease-in-out;
    transform: scale(1.2);
  }
  80% {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}
@keyframes starStroke {
  from {
    transform: scale(1);
  }
  20%, to {
    transform: scale(0);
  }
}
@keyframes starLine {
  from, 40% {
    animation-timing-function: ease-out;
    stroke-dasharray: 1 23;
    stroke-dashoffset: 1;
  }
  60%, to {
    stroke-dasharray: 12 13;
    stroke-dashoffset: -13;
  }
}

JS

window.addEventListener("DOMContentLoaded",() => {
	const starRating = new StarRating("form");
});

class StarRating {
	constructor(qs) {
		this.ratings = [
			{id: 1, name: "Terrible"},
			{id: 2, name: "Bad"},
			{id: 3, name: "OK"},
			{id: 4, name: "Good"},
			{id: 5, name: "Excellent"}
		];
		this.rating = null;
		this.el = document.querySelector(qs);

this.init();
	}
	init() {
		this.el?.addEventListener("change",this.updateRating.bind(this));

// stop Firefox from preserving form data between refreshes
		try {
			this.el?.reset();
		} catch (err) {
			console.error("Element isn’t a form.");
		}
	}
	updateRating(e) {
		// clear animation delays
		Array.from(this.el.querySelectorAll(`[for*="rating"]`)).forEach(el => {
			el.className = "rating__label";
		});

const ratingObject = this.ratings.find(r => r.id === +e.target.value);
		const prevRatingID = this.rating?.id || 0;

let delay = 0;
		this.rating = ratingObject;
		this.ratings.forEach(rating => {
			const { id } = rating;

// add the delays
			const ratingLabel = this.el.querySelector(`[for="rating-${id}"]`);

if (id > prevRatingID + 1 && id <= this.rating.id) {
				++delay;
				ratingLabel.classList.add(`rating__label--delay${delay}`);
			}

// hide ratings to not read, show the one to read
			const ratingTextEl = this.el.querySelector(`[data-rating="${id}"]`);

if (this.rating.id !== id)
				ratingTextEl.setAttribute("hidden",true);
			else
				ratingTextEl.removeAttribute("hidden");
		});
	}
}

Modèle de notation des étoiles animées

Recommandé

Effet de bouton bubble

Galerie de sites animée et 3D

Formulaire de connexion et d'inscription

HTML

CSS

JS

Recommandé

Effet de bouton bubble

Galerie de sites animée et 3D

Formulaire de connexion et d'inscription

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS