Super Mario Bros. en Media Queries CSS

Décidément, les Media Queries et les animations CSS inspirent les développeurs en ce moment puisqu’après Pacmanimation qui nous faisait jouer avec Pac-Man en redimensionnant notre fenêtre de navigateur, nous avons maintenant le droit à Super Mario Bros. ! Et pour ceux qui étaient déçus de l’animation Star Wars qui ne contenait aucun son, soyez heureux, car la magnifique mélodie de Mario retentit dans nos oreilles avec cette nouvelle animation !

C’est donc encore une fois dans le DemoStudio de Mozilla que cette animation a été mise en ligne. Au lancement, il nous sera donc demandé de redimensionner notre fenêtre afin d’obtenir un petit rectangle dans lequel nous trouverons un petit bouton Start. Bien évidemment, l’envie de cliquer dessus est irrésistible et une fois que nous aurons assouvi cette soif de curiosité, nous pourrons observer Mario s’élancer vers le premier niveau qui démarrera aussitôt.

Et Mario ne joue pas tout seul car s’il est entièrement déplacé grâce aux animations CSS, c’est bien vous qui contrôlez le début de ces animations en augmentant progressivement la taille de votre fenêtre de navigateur (d’ailleurs, on préférera Firefox pour cette animation…), tout ça avec la magie des Media Queries dont nous avons déjà parlé.

Si cette création est semblable à Pacmanimation, elle n’en reste pas moins impressionnante car assez complète (le niveau est plutôt long). De plus, l’ajout du son est réellement une très bonne idée : jouer à Super Mario Bros. sans ses fameuses musiques relève du sacrilège. Et si vous vous posez la question, la musique provient directement d’une balise audio issue de HTML5, donc non, point de Flash (qui utilise encore cette technologie dépassée ?).