L’heure, un compte à rebours et un compteur à la façon Apple : HTML, CSS, JS

10 milliards de téléchargement pour iTunes

Il y 9 mois, Apple annonçait les dix milliards de musiques téléchargées sur iTunes. Au delà de ce chiffre incroyable, mais ce qui m’a intrigué c’est surtout la manière simple et soignée dont le compteur était réalisé. De plus il est étonnamment simple. Désormais Apple l’utilise pour chaque sortie d’un produit. (Snow Leopard, etc…)

Récemment, j’ai lu un tweet de Valentin Brandt présentant un article (en anglais) sur la réalisation d’un compteur à la façon Apple. J’ouvre une parenthèse pour remercier l’auteur de m’avoir donné son accord pour m’en inspirer. Nous allons donc voir dans cet article la manière de procéder pour : afficher l’heure, un compte à rebours mais aussi un compteur et tout ceci en reprenant le design de base du compteur Apple.

Commençons par analyser le compteur

Leur compte à rebours comporte un petit retournement comme les réveils anciens. Au début, je pensais que la réalisation était faite en Flash, mais connaissant Apple ce n’était pas possible. Après inspection, on découvre qu’il a été fait avec une seule image, un peu de JavaScript, et une habile utilisation de sprites CSS. Ils ont aussi une version plus petite sur leur page d’accueil pour annoncer le lancement de certain produit.

L’image mesure 6000 pixels de haut et comprend les différentes étapes de chaque numéro de zéro à neuf. Une étape est constituée du retournement d’un chiffre à l’autre, par l’intermédiaire de six états ; un seul étant considéré à la fois. Le JavaScript change alors la propriété CSS background à courts intervalles réguliers pour donner l’illusion de retournement des chiffres, semblable à l’effet d’un zootrope.

L’intelligence est dans la simplicité…

Description de l’article

Je vais vous donner un bref aperçu des mesures prises pour reproduire le compteur, mais pour ceux qui veulent aller droit au but, vous pouvez directement aller sur la page de démonstration. Le code source d’origine étant assez commenté, toute personne intéressée pourra voir la source et observer ce qui se passe pour le reproduire.

En revanche pour ceux qui souhaitent des instructions plus techniques n’hésitez pas à lire la suite de cet article.

Notions de base

En regardant l’image de près, on observe que chacune est de 103 pixels en hauteur. L’animation de chaque chiffre comporte cinq cadres, laissant ainsi 618 pixels d’espace entre eux. Ainsi le chiffre zéro aurait une position pour son background de 0 0, le un serait 0-608px, le deux serait 0-1236px, etc..

La solution pour animer le compteur est d’utiliser une liste ordonnée des chiffres et de se servir du Javascript, par l’intermédiaire de jQuery, pour animer la position d’arrière-plan de chaque élément de la liste.

Nous allons prendre l’exemple de l’affichage d’un compteur affichant 10 milliards.

Affichage du compteur 10 milliards à la façon Apple

La structure HTML

[sourcecode language="html"]
<ul>
<li id="d9"></li>
<li class="seperator"></li>
<li id="d8"></li>
<li id="d7"></li>
<li id="d6"></li>
<li class="seperator"></li>
<li id="d5"></li>
<li id="d4"></li>
<li id="d3"></li>
<li class="seperator"></li>
<li id="d2"></li>
<li id="d1"></li>
<li id="d0"></li>
</ul>
[/sourcecode]

Le code HTML est très simple : il s’agit d’une liste comportant des éléments (dix), chacun identifié par un id et représentant dix chiffres et trois autres éléments ayant une classe separator servant à afficher les virgules de séparation.

Les styles CSS

[sourcecode language="css"]
ul {
list-style-type:none;
width:566px;
margin:50px auto;
}
li {
float:left;
background:url(filmstrip.png) 0 0 no-repeat;
width:53px;
height:103px;
}
li.seperator {
background:url(comma.png) 2px 75px no-repeat;
width:12px;
}
[/sourcecode]

Le code CSS ci-dessus permet de définir le style et les éléments de la liste. L’élément pour les chiffres est caractérisé par l’application du background:url(filmstrip.png) 0 0 no-repeat; et l’élément séparateur par : background:url(comma.png) 2px 75px no-repeat; (l’image étant la virgule).

Affichage du compteur à la façon Apple

Le JavaScript jQuery

Il a fallu peu de temps pour obtenir un fonctionnement simple du compteur. Mais la partie la plus complexe est le déclenchement d’une animation de cinq trames pour que chaque chiffre soit modifié. Pour simuler la fonctionnalité du compteur du site d’Apple, il faut le voir comme si c’était un comptage à une augmentation très rapide, avec des vitesses d’animation variables selon les chiffres.

Après incrémentation de la valeur, la première étape est d’observer quel est le prochain chiffre à être animé :

[sourcecode language="javascript"]
function digitCheck(x,y) {
var digitsOld = splitToArray(x),
digitsNew = splitToArray(y);
for (var i = 0, c = digitsNew.length; i < c; i++){
if (digitsNew[i] != digitsOld[i]){
animateDigit(i, digitsOld[i], digitsNew[i]);
}
}
}
[/sourcecode]

La méthode prend en entrée, les paramètres x (incrément de la valeur avant) et y (incrément de la valeur après), et les transmet à une autre fonction, appelée splitToArray, permettant de découper chaque valeur dans un tableau de chiffres individuels. Elle compare ensuite chaque chiffre, et s’il y a un changement, passe l’information à la méthode animateDigit.

Cette dernière est la partie la plus difficile, car la fonction animateDigit permet de faire des animations pour chaque chiffre correctement indexé. Dans la boucle qui contrôle l’animation, il est nécessaire de modifier la position d’arrière-plan (background) à cinq reprises avec un délai précis. Pour cela nous allons utiliser la fonction setTimeout directement native de Javascript qui va nous permettre de déclencher une minuterie et appeler la méthode doAnimate. La déclaration est la suivante :

[sourcecode language="javascript"]
setTimeout(doAnimate, timeOut, n, pos);
[/sourcecode]

Cette méthode fonctionne très bien dans les navigateurs Google Chrome et Firefox mais malheureusement pas sous IE… En effet, on ne peut pas passer des paramètres à la fonction setTimeout, on est donc obligé de passer par une fonction de fermeture (closure) :

[sourcecode language="javascript"]
setTimeout(fonction(){doAnimate(n,pos)}, timeOut);
[/sourcecode]

Mais il y a encore un problème … l’animation n’est pas régulière avec tous les navigateurs. Après une bonne nuit, Chris Nanney a pensé à utiliser jQuery grâce à une nouvelle méthode de temporisation qui a été ajoutée dans la version 1.4.

[sourcecode language="javascript"]
$("#d" + n).delay(speed).animate({‘background-position’: ’0 ‘ + pos + ‘px’}, 0);
[/sourcecode]

Depuis la mise en place de jQuery il n’y a plus de problème entre les différents navigateurs.

Personnalisation

Pour cet article, j’ai choisi d’utiliser les mêmes images que Chris Nanney (je me suis permis de modifier les couleurs).

Personnalisation du compteur à la façon Apple

Personnalisation du compteur à la façon Apple

La personnalisation de vos propres images est très facile. Tout ce dont vous avez besoin c’est un espacement constant entre vos images, et d’être en mesure d’en ajouter. Vous pouvez ainsi modifier la taille des chiffres ainsi que le design.

Dans le code source la personnalisation se trouve au début du code JavaScript :

[sourcecode language="javascript"]
// Tableau pour stocker la valeur Y du background-position Y de chaque chiffre
var initialPos = [0, -480, -960, -1440, -1920, -2400, -2880, -3360, -3840, -4320];
// Nombres de cadres d’animation
var animationFrames = 5;
// Hauteur du cadre
var frameshift = 80;
[/sourcecode]
  • Le tableau initialPos contient la valeur Y du départ de chaque chiffre, par incréments de 480 pixels (80px par trame x 6 images par chiffre)
  • animationFrames décrit qu’il y a 5 images d’animation entre les chiffres
  • frameshift Hauteur du cadre

Ce sont les seuls changements nécessaires pour faire fonctionner correctement le compteur (en dehors de la mise à jour de la CSS), et de retravailler les animations supplémentaires dans la fonction animateDigit.

Voilà j’espère que cet article vous plaira. Si vous avez des questions, des commentaires ou des suggestions, n’hésitez pas à laisser un commentaire, j’y répondrais.

Démos et téléchargement

Vous pouvez télécharger la démo de l'article dans un seul fichier ZIP.

Source et merci à @geekeriesfr

Un compte à rebours entièrement personnalisable

Suite à différents commentaires sur cet article, je vous propose un nouvel article qui va vous permettre de réaliser un compteur entièrement personnalisable. En effet, sur ce dernier, vous pourrez vous-même définir la couleur du compteur, la taille, etc… L’adresse de ce dernier est celle-ci : http://www.blog-nouvelles-technologies.fr/archives/10704/un-compte-a-rebours-entierement-en-jquery-et-css/

196 commentaires pour “L’heure, un compte à rebours et un compteur à la façon Apple : HTML, CSS, JS”

  1. Yohann Poiron dit :

    Oui c’est possible

  2. Balishi17 dit :

    merci c’est sripte trés utile
    mais je n’arrive pas a modifier l’hauteur et lal largeur des numéros ils sont trés grandes
    vous pouvez m’indiquer comment

  3. Yohann Poiron dit :

    Malheureusement avec la version actuelle des compteurs ce n’est pas possible… il faudrait une version 100% CSS sans images … ça va venir dès que j’aurais un peu de temps…

  4. Jeytri dit :

    Bonjour et merci pour ce guide
    par contre j’ai constaté que si on laisse le compteur ouvert dans un onglet
    puis que l’on surfe sur un autre onglet
    puis que l’on revient sur le compteur, celui-ci c’était bloqué et déroule les chiffres beaucoup plus rapidement pour retomber sur ses pieds.
    Je sais pas si je suis clair mais en gros ouvrez la page démo dans un nouvel onglet, changez d’onglet 30s puis revenez dessus et vous verrez le comportement du compteur.
    C’est corrigeable ?

  5. Team94 dit :

    bravo trés beau boulot
    j’ai un question
    peut on mettre un bouton stop et un bouton remise a zero sur le compte a rebour si oui un petit chemin d’explication si vous avez le temps ;-)

    merci encore

  6. Yohann Poiron dit :

    Pour le moment ce n’est pas possible… je travaille sur un prochain tuto pour le faire ;)

  7. Luc Hourriez dit :

    coucou
    j’adore le compteur
    par contre j’ai un souci
    je voudrais mettre sur une page d’accueil un compte a rebours avant le lancement officiel du site
    mais ma question est: ou est ce que je modifie exactement les valeurs pour que ca tombe par exemple pour le jeudi 26 janvier 2012 a 15h00??
    j’ai tenter de faire a droite et a gauche mais ca marche pas
    faut il que je compte le nombre dh’eure, de jour, de minutes et de secondes et que je le mette dans le fichier .js mais ou ca exactement?
    Merci de votre aide !

  8. Administrateur Frenchconnectio dit :

    meme misere, ils sont beaux les compteurs, mais impossible de trouver comment definir une date avec une heure pour la fin du compte à rebours.. j’ai essayé plein de trucs mais sans résultats.. un peu d’aide précise ..s’il vous plait mr le developpeur ? 

  9. Louisdelaage dit :

    Même galère !

    Merci de nous donner une indication !

  10. Louisdelaage dit :

    hé bien j’ai trouvé la solution, il suffit tout simplement de changer la date, (pour moi c’est en ligne 29 du doc original !

    Seul persiste ce probleme de secondes accéléré quand on change d’onglet 

    Merci pour ces infos super !

  11. Yohann Poiron dit :

    Pour ce problème malheureusement il n’est pas lié au compteur lui-même… enfin je pense !

    Sinon avez-vous essayé le nouveau compteur publié il y a quelques jours ?

  12. Louisdelaage dit :

    Oui, il est Top, vous faites un travail génial!

    En fait, celui ci me convient, de plus j’ai besoin de 999 jours.Je voudrais seulement le réduire, par ou est ce le plus simple ?
    Merci de votre attention !!!

  13. Yohann Poiron dit :

    Désolé de ma réponse tardive ! Pour modifier la date et l’heure, il suffit de modifier le code JavaScript ! 

  14. Yohann Poiron dit :

    Suite à différents commentaires sur cet article, je vous propose un nouvel article qui va vous permettre de réaliser un compteur entièrement personnalisable. En effet, sur ce dernier, vous pourrez vous-même définir la couleur du compteur, la taille, etc… L’adresse de ce dernier est celle-ci : http://www.blog-nouvelles-technologies.fr/archives/10704/un-compte-a-rebours-entierement-en-jquery-et-css/

  15. Crampouz dit :

    Bonjour !
    Merci tout d’abord pour ce script ! C’est le meilleur que j’ai trouvé pour faire ce que je voulais. 
    Un seul hic, impossible de le faire fonctionner le compte à rebours sous ie. Pourtant, je vois dans les explications ci-dessus, que le Jquery permet justement de le faire fonctionner sous ie. Aurais-je louper une manip à faire ?
    Sachant que pour l’instant, je n’ai rien changé au code, j’ai juste téléchargé les fichiers et mis directement sous mon wamp. Tout marche nickel partout, sauf le compte à rebours sous ie.
    Je laisserai volontiers tomber ce navigateur obsolète mais il représente malheureusement encore un petit pourcentage d’utilisateurs.
    Que faire ?
    Merci d’avance

  16. Yohann Poiron dit :

    Bonjour,

    Merci pour votre retour je regarde dès ce weekend et je reviens vers vous.

  17. Crampouz dit :

    Merci !
    Pour info, j’ai aussi testé l’alternative donnée dans le lien ci-dessous (http://www.blog-nouvelles-technologies.fr/archives/10704/un-compte-a-rebours-entierement-en-jquery-et-css/), mais même problème sous ie.
    Décidément, quelle plaie ce navigateur…
    J’attends votre retour et surtout bon courage.

  18. Yohann Poiron dit :

    Bonjour,

    Pour l’alternative celui-ci est désormais compatible sous IE.

    Pour le problème sous IE, celui-ci a été corrigé.

  19. crampouz dit :

    Super ! Merci beaucoup.
    Il faudra que je modifie tout ça avec mon propre design et mon décompte, mais en tout cas la démo fonctionne bien (je n’ai pas testé l’alternative par contre).

    Très bonne soirée et merci encore.

  20. Yohann Poiron dit :

    Au plaisir !

  21. Yohann Poiron dit :

    Bonjour, 

    Malheureusement ce problème n’est pas lié au compteur… :(

  22. Louisdelaage dit :

    Super votre autre topic !
    En fait je préfaire celui ci car il est basé sur l’horloge windows  et c’est exactement ce que je cherche, de plus je suis sur plus de 99 jours.
    Cependent j’ai vraiment du mal à placer le JS, comment le placer au centre, actuellement il doit être en px ou en %.
    J’ai essayer de plusieurs façons mais je débute. Et si je pouvais le réduire d’environ 1/3 se serait top !

    Pourriez vous avoir des élements de réponses ? !Merci de tout ce que vous faites!

  23. Yohann Poiron dit :

    Malheureusement celui-ci ne peut être facilement redimensionné du fait des images

  24. Crampouz dit :

    Bonjour !

    Pour info, j’ai cherché pendant un petit moment comment faire finir le compte à rebours non pas à minuit le jour J , mais à une heure précise de la journée (par exemple, date cible : 30 mars 2012 à 11h00). Alors si jamais un non-développeur comme moi se pose cette question, voilà ce que j’ai rajouté et qui fonctionne.

    Dans le fichier countdown.js, sur la ligne où on indique la date (ligne 4), j’ai rajouté « 11:00″ :
    var target = ’11:00, March 30, 2012′;

    Voilà ! Peut-être évident pour les développeurs, mais moins pour les novices comme moi, héhé, alors je voulais faciliter la tâche à certains.

    Bonne soirée !

  25. Cedric dit :

    Salut , j’ai testé mais chez moi ça ne marche pas il me met du 999 presque partout, tu as fait d’autres modifs ?

  26. David Blanchet dit :

    Perso je dois le mettre à la fin et ça marche:
    var target = ‘April 11, 2014, 11:00′;

    Voilà :)

Laissez un commentaire

Commentaires en lien dofollow à partir de 2e commentaire, profitez-en !

XHTML: Vous pouvez utiliser ces balises et attributs: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>