Une horloge en HMTL/CSS/JS pour le passage à la nouvelle année

Envie de créer une animation pour la nouvelle année qui se profile ? Et si vous optiez pour une horloge avec un fond festif ? C’est ce que nous propose Mark Boots sur la plateforme CodePen. Vous trouverez le lien vers la démonstration en fin d’article.

clock 2022

Le code proposé est réparti entre HTML, CSS et JS.

  • HTML :
<!-- background Pexels.com -->
<body>
	<div class="wrapper">
		<div class="year-number">2</div>
		<div class="clock">
			<div class="inner">
				<div class="numbers">
					<div class="number" style="--number:1"><span>1</span></div>
					<div class="number" style="--number:2"><span>2</span></div>
					<div class="number" style="--number:3"><span>3</span></div>
					<div class="number" style="--number:4"><span>4</span></div>
					<div class="number" style="--number:5"><span>5</span></div>
					<div class="number" style="--number:6"><span>6</span></div>
					<div class="number" style="--number:7"><span>7</span></div>
					<div class="number" style="--number:8"><span>8</span></div>
					<div class="number" style="--number:9"><span>9</span></div>
					<div class="number" style="--number:10"><span>10</span></div>
					<div class="number" style="--number:11"><span>11</span></div>
					<div class="number" style="--number:12"><span>12</span></div>
				</div>
				<div class="handles">
					<div class="circle back"></div>
					<div class="handle hour"></div>
					<div class="handle minute"></div>
					<div class="handle second"></div>
					<div class="circle front"></div>
				</div>
			</div>
			
		</div>
		<div class="year-number">2</div>
		<div class="year-number">2</div>
	</div>
</body>
  • CSS :
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background-color: #dde1e7;
  font-size: 3.5vmin;
  background-image: url("https://images.pexels.com/photos/3171815/pexels-photo-3171815.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-size: cover;
  background-position: center;
  --colorNumbers: rgba(240, 193, 140, 0.6);
}

.clock {
  width: 10em;
  aspect-ratio: 1/1;
  background: radial-gradient(transparent 50%, var(--colorNumbers) 51%);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.inner {
  width: 7.25em;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: grid;
  position: relative;
}

/* handles */
.handles {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: grid;
  align-items: center;
  position: relative;
  transform: rotate(-90deg);
}
.handle {
  position: absolute;
  border-radius: 100vmax;
  height: var(--handleHeight);
  width: calc(var(--handleLength) + var(--handleOverflow));
  left: calc(50% - var(--handleHeight) / 2 - var(--handleOverflow));
  transform-origin: calc(var(--handleHeight) / 2 + var(--handleOverflow))
    calc(var(--handleHeight) / 2);
  transform: rotate(0);
}
.handle.hour {
  --handleHeight: 0.4em;
  --handleLength: 2.2em;
  --handleOverflow: 0em;
  background: #0c0c0d;
}
.handle.minute {
  --handleHeight: 0.3em;
  --handleLength: 3em;
  --handleOverflow: 0em;
  background: #0c0c0d;
}
.handle.second {
  --handleHeight: 0.1em;
  --handleLength: 3.25em;
  --handleOverflow: 0.5em;
  background: #fd0e0e;
}
/* handle circles */
.circle {
  position: absolute;
  height: var(--circleHeight);
  aspect-ratio: 1/1;
  left: calc(50% - var(--circleHeight) / 2);
  border-radius: 50%;
}
.circle.back {
  --circleHeight: 0.7em;
  background: #0c0c0d;
}
.circle.front {
  --circleHeight: 0.4em;
  background: #fd0e0e;
}

/* numbers */
.numbers {
  position: absolute;
  width: 100%;
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  transform: rotate(-90deg);
}
.numbers > .number {
  position: absolute;
  width: 9.325em;
  display: flex;
  justify-content: flex-end;
  transform: rotate(calc(30deg * var(--number)));
}
.numbers > .number > span {
  font-family: "Montserrat", sans-serif;
  font-size: 0.75em;
  width: 1em;
  text-align: center;
  color: rgb(26, 24, 23);
  transform: rotate(calc(-30deg * var(--number) + 90deg));
}

.wrapper {
  display: flex;
  align-items: center;
  filter: drop-shadow(0.1em 0.1em 0.05em rgba(0, 0, 0, 0.5));
}

.wrapper .year-number {
  color: var(--colorNumbers);
  font-family: "Montserrat", sans-serif;
  font-size: 10em;
}
  • JS :
const hourHandle = document.querySelector(".handle.hour");
const minuteHandle = document.querySelector(".handle.minute");
const secondHandle = document.querySelector(".handle.second");

updateClock();

function updateClock() {
  const date = new Date();
  const hours = date.getHours() % 12;
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  const secondsDegree = 360 / 60 * seconds;
  secondHandle.style.transform = `rotate(${secondsDegree}deg)`;

  const minutesDegree = (360 / 60 * minutes) + (secondsDegree / 60);
  minuteHandle.style.transform = `rotate(${minutesDegree}deg)`;

  const hoursDegree = (360 / 12 * hours) + (minutesDegree / 60)
  hourHandle.style.transform = `rotate(${hoursDegree}deg)`;

  window.requestAnimationFrame(updateClock);
}

Source et démonstration : https://codepen.io/MarkBoots/pen/poWdGzY

5 1 Vote
Évaluation de l'article
S'abonner
Recevoir des notifications pour :
guest

* * Cette case à cocher est obligatoire

*

J'accepte

0 Commentaires
Commentaires publiés
Voir tous les commentaires