L’animation de Mario Bros en CSS 3

Petite touche de nostalgie aujourd’hui. En effet, pour ceux qui ont connus Mario Bros au tout début de son succès, vous serez peut-être un peu ému de le revoir sur le web, dans une animation modeste mais assez fidèle à nos souvenirs. Le plus étonnant réside dans le fait qu’il s’agît là d’une animation entièrement en CSS 3 et HTML 5… :)


mario

Je ne le présente pas car peu de gens ne le connaissent pas, je parle bien sûr de Mario Bros, le petit plombier de Nintendo qui a connu un énorme succès, et continu encore de faire valoir sa place de meilleur personnage de jeux vidéo, même si bien d’autres sont venus lui faire concurrence depuis.

Mais quel rapport avec le web ? En fait, c’est la découverte d’un ami, tombé par hasard sur une animation réalisée par un designer, Tom Giannattasio. Une animation sympathique puisqu’elle montre notre cher Mario Bros tout en pixel en train de courir dans un détail tout aussi pixelisé. Le tout est assez fidèle aux premières aventures du héros de jeux vidéos.

Comme le dit son auteur, l’animation n’est constituée que de CSS et d’HTML. Il n’y a donc pas d’images, pas d’utilisations de Canvas comme on pourrait le penser, pas de données URI, pas de JavaScript !

Je vous laisse découvrir l’animation pour juger par vous-même ;)

Bon d’accord, on ne peut pas y jouer, et pourtant c’est tentant mais cela montre la puissance du CSS et du HTML. Mais à en croire l’auteur de cette sympathique petite animation, d’autres exemples sont à suivre, ainsi qu’un générateur de code !

Après, je n’ai pas testé si l’animation fonctionnait sur tous les navigateurs, à vous de tester ;-)

Un commentaire

  1. Bertrand a écrit :

    C’est super, Mario Bros 3 et son costume de tanuki !!!


    Répondre ↓
Réagir à cet article



Vous pouvez utilisez les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>