[JS]Horloge digitale, version sprite vertical
Création d'une horloge digitale en utilisant une image de fond, type sprite, pour afficher les valeurs.
Rendu de l'horloge
Je vous concède qu'il y a mieux comme design, mais on va faire avec !
Image sprite de fond
L'image, simpliste, de fond est constituée de onze « digits », de même hauteur, représentant les dix chiffres plus le séparateur, ici les deux points. Sur l'image ci-contre le gradrillage n'appartient pas à celle-ci.
Les dimensions originales de l'image étant de .
L'image de fond est redimensionnée, en CSS, en fonction de la hauteur des différents éléments conteneurs.
Structure HTML
<div id="clock"> <!-- ici viendront les 8 éléments <span> --> </div>
Tous les éléments <span> sont construits dynamiquement, inutile donc de les mettre dans le code.
CSS appliqué
La hauteur du background est fixée à 1100%, soit onze, le nombre de « digits », fois 100%, ainsi chaque background-position sera décalé simplement de 10%.
Les dimensions des éléments <span> sont à ajuster suivant la taille de l'image de fond, une simple règle de trois suffit pour calculer les bonnes dimensions à appliquer.
Dans le cas où l'on part d'une image horizontale il faut inverser les valeurs en pourcentage du background-size sur conteneur <div id="clock">
et également les valeurs des background-position des éléments <span>.
Voir exemple sur cette page.
L'effet de transition n'est qu'un petit plus.
Le script
Le principe repose sur l'affectation d'une classe CSS aux éléments <span>,
exemple si la valeur à afficher est le « digit » 8 on affecte la classe clock_8 à l'élément correspondant, le CSS fera le reste.
Seuls les éléments affectés par un changement sont traités, les valeurs en cours étant stocké dans la variable tabValeurs, il suffit donc de comparer la valeur à afficher et celle en cours.
Le script utilise requestAnimationFrame() alors qu'un simple setInterval() serait suffisant.