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.
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
* * Cette case à cocher est obligatoire
*J'accepte