Le but de ce tutoriel sera de vous montrer comment exploiter certaines propriétés CSS3 pour créer une horloge et comment l'animer avec Javascript. La création de ce petit module nécessite peu de connaissances : il suffit de connaître les bases du Javascript, du CSS et, bien sûr, de l'HTML. :)
Le gros problème de ce module est la compatibilité. En effet, il utilise des propriétés CSS3 qui ne sont actuellement prises en charge que par les navigateurs récents. Voici la liste des principaux navigateurs qui le supportent :
Firefox 3.5 et plus ;
Safari 3.0.4 et plus ;
Google Chrome ;
Internet Explorer 9 ;
Opera 10.5 et plus ;
Si vous voulez savoir si votre navigateur peut afficher le module, allez sur cette page. Si votre navigateur n'est pas compatible, il faudra vous procurer un navigateur plus récent.
Nous verrons quand même comment faire pour que tous navigateurs affichent une page correcte sans bug, même s'ils ne sont pas compatibles.
Dans cette partie, je vais expliquer le principe de ce module, comment il fonctionne. On va décortiquer son fonctionnement pour pouvoir coder efficacement et sans tracas. :) On ne codera que dans la partie suivante.
Transform et transform-origin
Le module se base sur les propriétés CSS3 transform et transform-origin. La première propriété transforme (quelle surprise :D ) un élément de la page. Les transformations les plus intéressantes sont la mise à l'échelle, la rotation et la translation. Nous ne nous servirons que de la rotation. Voici un exemple d'utilisation pour que vous compreniez bien comment cela fonctionne :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Créer une horloge animée avec CSS3 et Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
h1
{
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
-moz-transform-origin: center center;
-webkit-transform-origin: center center;
-o-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
text-align: center;
}
</style>
</head>
<body>
<h1>Mon super titre</h1>
</body>
</html>
Eh ! Mais je croyais qu'on utilisait juste les propriétés transform et transform-origin ! o_O
Qu'est-ce que c'est que ces -moz-, -webkit-, -o- et -ms-?
Bonne question. En fait, ces propriétés (transform et transform-origin) ne sont pas encore dans les standards du W3C (la spécification CSS3 n'étant pas encore finalisée), donc les navigateurs qui les utilisent mettent un préfixe (-moz- pour Mozilla, -webkit- pour Safari, -ms- pour Internet Explorer et -o- pour Opera) pour ne pas interférer avec les standards. Il est tout de même préférable de rajouter les propriétés sans suffixe pour qu'elles fonctionnent pleinement le jour où un navigateur ne comprendra que la propriété non suffixée (Merci à SpaceFox pour la remarque).
Ça veut dire qu'on devra mettre -moz-*, -webkit-*, -o-* et -ms-* à chaque fois ?
Malheureusement, oui.
On décortique le code
L'xHTML
Pour la partie xHTML, l'horloge est très simple, vu que ce sont trois images (les trois aiguilles) dans un conteneur (ici un div).
Le CSS
Du côté du CSS, ça reste toujours aussi simple : On va mettre le cadran comme fond de l'horloge. On va arrondir les bords du div conteneur de l'horloge pour qu'il fasse un cercle entourant le cadran et on va placer l'horloge en position relative pour pouvoir positionner les aiguilles en fonction de la position de l'horloge.
Le Javascript
C'est ici que résident tous les secrets de cette horloge. On va commencer par déterminer le nombre de secondes écoulées depuis le début de la journée. Ensuite, on va faire tourner les aiguilles pour qu'elles indiquent l'heure du chargement de la page. Et enfin, toutes les secondes, on va incrémenter le nombre de secondes écoulées depuis le début de la journée, puis replacer les aiguilles en conséquence.
Avouez tout de même que le fonctionnement est vraiment simple ! :)
Nous y voici donc, au codage de cette horloge. Cela va aller assez vite, vu que l'on a déjà fait 70% du travail en décortiquant le fonctionnement de l'horloge.
L'xHTML
On va donc commencer par mettre un div qui contient les 3 aiguilles :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Horloge</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="horloge">
<img class="aig" id="aigS" src="aigS.png" alt="aiguille des secondes" />
<img class="aig" id="aigM" src="aigM.png" alt="aiguille des minutes" />
<img class="aig" id="aigH" src="aigH.png" alt="aiguille des heures" />
</div>
</body>
</html>
Voici d'ailleurs les images des trois aiguilles, ainsi que le cadran (vous remarquerez au passage que je n'ai aucun talent d'artiste :p ) :
On met l'horloge en position: relative;. Cela permet de pouvoir positionner les aiguilles en fonction de l'emplacement de l'horloge. On met les aiguilles en position: absolute;. On met le cadran : background: url('cadran.png');. On agrandit l'horloge pour que le cadran soit entier : height: 567px; width: 567px;. On met le bas des aiguilles au milieu de l'horloge : bottom: 283px;. On règle l'abscisse des aiguilles : /* aiguille des secondes : */left: 283px; /* pour les deux autres : */left : 278px;. On place le centre de rotation des aiguilles : transform-origin: bottom center; (je n'ai pas mis les suffixes). Et enfin, on met une bordure à l'horloge et on l'arrondit pour qu'elle soit circulaire : border: 1px solid black; border-radius: 284px;. On indique ici la valeur de l'arrondi en pixels parce que webkit n'accepte pas la valeur en pourcentage.
Voici un petit tableau de proportionnalité pour comprendre les calculs :
Nombre de degrés
Minutes, secondes
Heures
360
60
12
Nombre inconnu (noté x)
Nombre de minutes ou secondes (notées respectivement « m » et « s »)
Nombre d'heures (notées « h »)
Comme vous le voyez, il n'y a qu'un nombre inconnu ( : x ), donc pour calculer l'angle de décalage de l'aiguille des secondes, on doit faire : x_s=\frac{360s}{60} Pour celle des minutes, on doit faire : x_m=\frac{360m}{60} Et pour celle des heures, on fait : x_h=\frac{360h}{12} Et donc en simplifiant, on obtient respectivement : x_s=6s\qquad ;\qquad x_m=6m\qquad;\qquad x_h=30h
Oui, mais on ne possède que le nombre de secondes !
J'y viens, j'y viens. Je devine que tout le monde sait qu'il y a 3600 secondes dans une heure et 60 secondes dans une minute. Donc on a : m=\frac{s}{60}\qquad;\qquad h=\frac{s}{3600} Les calculs de tout à l'heure deviennent donc, en simplifiant : x_s=6s\qquad ;\qquad x_m=\frac{s}{10}\qquad;\qquad x_h=\frac{s}{120}
Retournons à notre Javascript : Il nous reste juste à faire en sorte que l'horloge se « mette à l'heure » (c'est le cas de le dire :p ) toutes les secondes. Pour cela, on va utiliser setInterval() qui va exécuter une fonction toutes les x millisecondes :
On a réussi à créer notre horloge, mais elle n'est compatible qu'avec certains navigateurs et de ce fait s'affiche mal dans les autres. On va commencer par régler ce problème. Tout d'abord, il ne faut pas afficher les aiguilles et le cadran, on va donc les supprimer de l'HTML et de la CSS :
Vous remarquerez dans la condition que pour de sombres raisons, suivant la version Opera ne va pas donner une chaîne de caractère, mais un objet CSSTransformValue, comportement qui n'est valable que pour cette propriété.
Avec l'HTML, la CSS et le Javascript, on obtient au final :
Bon, je sais pas si c'est pareil pour vous, mais moi j'en ai vraiment marre de recopier à chaque code que je vous montre deux fois exactement le même groupe d'instructions dans le script. On va donc créer une fonction qui exécutera ces instructions :
Quand il va analyser ça, le navigateur va d'abord voire que c'est une assignation et va calculer ce qui ce trouve à droite du signe « = » et va se retrouver avec une autre assignation qu'il va traiter de la même façon. Avec des parenthèses et de l'indentation, ça donne ça :
Encore un dernier petit truc : la fonction setInterval peut se décaler assez rapidement pour arriver à un décalage de une à deux minute(s) en une heure (au pire). On va donc régler ce problème en ajoutant cette ligne de code à la fin du script précédent :
setInterval(function() {
d = new Date();
time = d.getSeconds() + 60 * d.getMinutes() + 3600 * d.getHours();
}, 60000);
On a enfin réussi à terminer cette horloge, mais il reste encore des améliorations possibles. Voici une liste non exhaustive de ce que vous pouvez améliorer :
Réduire la taille de l'horloge (notamment du cadran) ;
permettre à l'utilisateur de déplacer l'horloge sur la page ;
permettre à l'utilisateur de cacher l'horloge ;
faire un cadran et des aiguilles plus jolis ;
afficher l'heure en digital pour ceux qui ne peuvent pas avoir l'horloge ;
…
Maintenant, vous savez comment faire une jolie horloge pour votre site. Mais surtout, vous connaissez de nouvelles propriétés CSS (et peut-être de nouvelles choses en Javascript). Je vous invite à aller regarder les autres propriétés disponibles via -webkit-* et -moz-* (et aussi -o-* et -ms-*) grâce à ces liens (merci à Thunderseb) :
Et voici un site (en anglais) parlant du CSS3 si vous voulez aller plus loin.
Si vous constatez une erreur ou une inexactitude dans ce tutoriel, ou bien que vous avez des remarques à faire, n'hésitez pas à poster un commentaire.
Afin de faire fonctionner cette horloge avec les navigateurs qui n'ont pas implémenté les propriétés CSS3, il existe un plugin jQuery qui pourrait résoudre vos problèmes : Transformie (en anglais). Pour les allergiques à jQuery, j'ai aussi trouvé cssSandpaper (en) qui vous permettra d'utiliser transform et d'autres propriétés CSS3 avec Internet Explorer et d'autres navigateurs non compatibles.
