Vitrine des sites web HTML5 : 48 démos potentielles qui tuent Flash

Donc, vous avez entendu toutes les rumeurs selon lesquelles HTML5 prendrait le dessus sur Adobe Flash. Alors que la plupart de la communauté web argumente que c’est possible ou non, vous devez vous demander ce qui rend HTML5 si puissant que même la société géante Apple veut l’utiliser pour remplacer Flash.

C’est pourquoi ce post existe, nous n’allons pas parler de ce que HTML5 peut faire, mais montrer des démos en direct de choses magiques que HTML5 peut réaliser avec d’autres langages comme JavaScript, alors préparez-vous à être inspiré.

Note : Comme HTML5 n’est pas entièrement supporté par certains navigateurs web comme Internet Explorer, il vous est fortement recommandé d’utiliser le navigateur Firefox pour visualiser toutes les démos HTML5 ci-dessous.

Animation

L’élément canvas de HTML5 est le facteur décisif pour que HTML5 remplace certaines animations Flash. Il vous permet de construire un rendu dynamique et scriptable de formes 2D et d’images bitmap avec Javascript, ce qui, par d’autres termes, est une animation contrôlable.

Audioburst Animation

Une animation confortable et fantastique créée avec le canvas et la balise audio de HTML5.

Ball Pool

Etant présentée lors du dernier événement Google I/O, cette démo vous montre à quel point HTML5 peut être dynamique.

Blob Sallad

Une créature engendrée par HTML5 qui vous plairait.

Bomomo

Avec Bomomo, vous pouvez observer différents mouvements atomiques simulés avec HTML5.

Browser Ball

S’émerveiller avec cette balle HTML5 ‘cross-browser’.

Bulles

Amusez-vous en créant des bulles flottantes sans fin avec différentes couleurs.

Canvas Cartoon Animation

Un dessin animé HTML5 simple et drôle qui vous aide à comprendre ce que l’élément canvas de HTML5 peut faire.

Coolclock

Une jolie horloge analogique personnalisable construite par HTML5 et JavaScript.

Flickr PS3 Slideshow

Voir les photos de votre Flickr avec un diaporama de style PS3 dans le navigateur web.

Polaroid interactif

Une démo interactive qui fonctionne de manière assez similaire à l’interface multi-touch.

JS Fireworks

Profitez du moment du feu d’artifice avec votre gravité et votre vitesse préférées, alimenté par HTML5 et Javascript.

Kaléidoscope

Un kaléidoscope HTML5 très beau et futuriste.

Particules liquides

Une animation de particules sensibles qui réagit en fonction du mouvement de votre souris.

Mesmerizer

Une autre démo HTML5 sensible et remarquable qui montre comment les éléments proches réagissent en fonction du mouvement de votre souris.

Nébuleuse

Dégagez-vous avec cette merveilleuse nébuleuse HTML5.

Parallax

Voyez toutes les formes 2D en perspective parallèle.

Animation de particules

Une élégante animation de particules HTML5 qui peut prendre la forme de votre message préféré.

Spread

Dégagez-vous avec cette animation d’étalement sans fin.

Starfield

Une animation de champ d’étoiles HTML5 très cool qui changerait de direction et de vitesse en fonction du mouvement de votre souris.

Destruction vidéo

Un clic pour faire exploser une vidéo en cours de lecture.

Forme d’onde

Observez comment la vague de toile de HTML5 se déplace en modifiant son amplitude, sa longueur d’onde, sa largeur, etc.

Effet 3D

Impressionné par l’animation de la toile ? C’est plus que l’élément canvas de HTML5 peut faire, et c’est ce qu’on appelle l’effet 3D. Le développeur peut s’appuyer sur l’élément canvas, le DOM et le JavaScript pour créer un effet 3D, qui peut ensuite être développé en animation 3D ou en jeu.

Canvas3D et Flickr

Vivez une toute nouvelle expérience 3D avec le photostream de Flickr.

Simulation de tissu

Une simulation de tissu réaliste, basée sur HTML5.

Monstre en évolution

Observez un monstre qui évolue en une créature compliquée, l’un de ses créateurs est HTML5.

Google Giftbox

Le moteur de recherche géant Google est présenté en 3D, en vue jouable.

JS Touch

Une vitrine ‘3D sur toile 2D’ de haute qualité et réaliste.

Présentation de données

Si l’élément canvas de HTML5 peut être utilisé pour créer des animations et un effet 3D, il peut également être mis en œuvre pour présenter des données mathématiques.

Gnuplot

Gnuplot, une application de traçage de données en version HTML5.

RGraph

RGraph fournit une large gamme de présentation de données comme le graphique à barres, la barre de progression et le graphique radar traditionnel.

Application Web

En définitive, en utilisant toutes les possibilités combinées par HTML5 et d’autres langages, on peut créer une application interactive ou un jeu proche de l’application Flash.

CanvasPaint

Témoin, le frère de Microsoft Paint arrive dans votre navigateur web, et son père est HTML5.

CanvasMol

Une application scientifique qui est construite pour vous aider à comprendre la structure de certains éléments terrestres.

Cartoon Builder

Dessinez une image de dessin animé intéressante avec ce constructeur de dessin animé minimal et interactif.

Drag Anything Here

Drag tout ce que vous pouvez glisser dans la démo pour montrer les détails.

Gartic Sketch

Une application HTML5 originale qui vous permet de faire quelques dessins de base qui peuvent être enregistrés dans différents formats d’image comme jpeg ou png.

PhysicSketch

Dessinez ce que vous voulez et voyez comment ils réagissent à la gravité simulée.

Sketchpad

Une puissante application de dessin HTML5 qui vous permet de dessiner et de modifier votre image de manière précise.

Smalltalk

Une application web qui confirme la position géographique d’un message lié à la météo acquis sur Twitter, les formant ainsi en une carte ‘météo sociale’ basée sur une toile, assez triviale (comme l’indique l’auteur) mais intéressante.

Jeu

3Bored

Vous ne vous ennuieriez jamais si vous pouvez continuer à éviter des centaines de balles HTML5 à la seconde suivante.

Breakout

Rebondissez la balle pour casser toutes les briques.

Canvascape

Pas tout à fait un jeu, mais il démontre comment HTML5 peut être utilisé pour développer un jeu par navigateur de tir à la première personne.

Catch It

Combien de balles pouvez-vous esquiver pour obtenir votre carré HTML5 gagnant ?

Chain Reaction

Enchaînez l’explosion pour atteindre l’objectif, ne devenez pas accro.

Cubeout

Joue à Tetris en 3D, vue de haut en bas.

etchaPhysics

Dessine un élément pour déplacer la balle vers l’étoile, n’oublie pas la gravité.

Jigsaw Puzzle

Cliquez, faites tourner et déposez les pièces du puzzle pour résoudre ce puzzle basé sur HTML5.

Slide Puzzle

Glissez vers la victoire, un autre jeu HTML5 construit pour presser le jus de votre esprit.

Same Game

Enlevez certains groupes pour obtenir un autre groupe apparié de la même couleur et vous finiriez par remporter la victoire.

Tetris

Un des jeux les plus classiques ramené à la vie par HTML5.

Torus

Encore un autre jeu Tetris en version pseudo-3D.

Conclusion

Quelle est la limite de HTML5 ? À ce stade, nous ne pouvons pas décider, mais avec l’impressionnante vidéo ci-dessous, nous pouvons savoir jusqu’où le HTML5 a été poussé :

Oui, c’est Quake II dans le navigateur web, donc maintenant il est très clair qu’avec le HTML5, plus d’application web révolutionnaire serait née pour servir des milliards d’internautes. C’est rapide, ça évolue, et ça change le monde du web. La question est la suivante : comment utiliseriez-vous ce HTML5 qui change la donne ?

Nous aimerions bien entendre votre idée !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.