Un trombone en HTML5 et CSS3

Si vous avez toujours rêvé de jouer du trombone (l’instrument de musique, hein, pas le petit truc métallique pour attacher des feuilles), cette nouvelle animation est faite pour vous ! En effet, vous allez pouvoir jouer du trombone avec pour seul outil votre navigateur, sans Flash, avec juste des Media Queries CSS3 et des balises audio HTML5.

Et il faut avouer que c’est plutôt bien foutu finalement : on arrive face à un trombone vu de profil et on peut voir huit notes en haut à droite de l’écran. Il nous suffira alors de redimensionner notre fenêtre afin que le bord droit parvienne jusqu’à l’une des notes qui sera alors jouée. Bon, bien évidemment, vous n’allez pas pouvoir recréer les plus grandes symphonies mais vous pourrez toujours vous amuser à jouer une gamme de Do (Do – Ré – Mi – Fa – Sol – La – Si – Do).

Si l’animation en elle-même n’est au final pas franchement utile, elle permet néanmoins de constater qu’on peut faire de plus en plus de choses avec des outils qui ne paraissaient à la base pas du tout faits pour ça : il y a encore quelques années, il fallait passer obligatoirement par Flash si on voulait intégrer du son ou des vidéos. De même, pouvoir modifier l’aspect d’une page sans passer par JavaScript est aussi très récent.

Qui sait ce qu’on va nous sortir la prochaine fois ? En tous cas, ça donne des idées : si on arrive à faire des choses de ce niveau avec du simple HTML et du simple CSS, imaginez ce qu’on pourrait obtenir en y ajoutant du JavaScript bien placé !