48 démos brutales HTML5 / CSS3

animation de dessin animé sur toile Vitrine HTML5: 48 démos de destruction Flash potentielle

Je prends ce post pour répondre à une question que vous vous posez récemment dans les commentaires d'un article:

Quel est le bon moment pour commencer à concevoir entièrement avec HTML5?

Eh bien, honnêtement, cela dépend de la cible que vous ciblez. Si vous ne prévoyez pas que vos visiteurs utilisent Internet Explorer (par exemple: la page du logiciel Mac), alors commencez tout de suite avec HTML5, mais si vous avez besoin de personnes avec IE pour voir votre site Web, vous feriez mieux d'attendre ...

À l'entrée, bien après le saut, 48 démos de HTML5 qui sont incroyables et méritent d'être vues. Grand est petit.

Source | HongKiat

aAnimation udioburst

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

animation audioburst Vitrine HTML5: 48 démos de destruction Flash potentielle

Piscine à balles

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

Ball Pool HTML5 Showcase: 48 démos de destruction Flash potentielle

Sallad Blob

Une créature générée par HTML5 qui vous plairait.

blob sallad HTML5 Showcase: 48 démos de destruction Flash potentielle

bomomo

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

Vitrine bomomo HTML5: 48 démos de destruction Flash potentielle

Boule de navigateur

Laissez-vous surprendre par cette boule HTML5 «cross-browser».

browser ball Vitrine HTML5: 48 démos de destruction Flash potentielle

Bubbles

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

bulles HTML5 Showcase: 48 démos de destruction Flash potentielle

Animation de bande dessinée sur toile

Un dessin animé HTML5 simple et amusant qui vous aide à comprendre ce que l'élément canvas de HTML5 peut faire.

animation de dessin animé sur toile Vitrine HTML5: 48 démos de destruction Flash potentielle

coolhorloge

Une belle horloge analogique personnalisable construite par HTML5 et JavaScript.

Coolclock HTML5 Showcase: 48 démos de destruction Flash potentielle

Diaporama Flickr PS3

Affichez les photos de votre Flickr avec un diaporama de style PS3 dans le navigateur Web.

diaporama flickr ps3 Vitrine HTML5: 48 démos de destruction Flash potentielle

Polaroid interactif

Une démo interactive qui fonctionne assez similaire à l'interface multi-touch.

Vitrine interactive polaroid HTML5: 48 démos de destruction Flash potentielle

Feu d'artifice JS

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

js fireworks HTML5 Showcase: 48 démos de destruction Flash potentielle

Kaleidoscope

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

kaléidoscope HTML5 Showcase: 48 démos de destruction Flash potentielle

Particules liquides

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

particules liquides Vitrine HTML5: 48 démos de destruction potentielle de flash

hypnotiseur

Une autre démo HTML5 sensible et exceptionnelle qui montre comment les éléments proches réagissent avec le mouvement de votre souris.

Mesmerizer HTML5 Showcase: 48 démos de destruction Flash potentielle

Nuage de nébuleuse

Perdez-vous avec cette merveilleuse nébuleuse HTML5.

Nebula cloud Vitrine HTML5: 48 démos de destruction Flash potentielle

Parallaxe

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

Parallax HTML5 Showcase: 48 démos de destruction Flash potentielle

Animation de particules

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

animation de particules Vitrine HTML5: 48 démos de destruction Flash potentielle

Se propager

Perdez-vous avec cette animation de diffusion sans fin.

spread HTML5 Showcase: 48 démos de destruction Flash potentielle

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.

Starfield HTML5 Showcase: 48 démos de destruction Flash potentielle

Destruction vidéo

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

destruction vidéo Vitrine HTML5: 48 démos de destruction Flash potentielle

Waveform

Remarquez comment l'onde de canevas de HTML5 se déplace en modifiant son amplitude, sa longueur d'onde, sa largeur, etc.

Waveform HTML5 Showcase: 48 démos de destruction potentielle de Flash

Effet 3D

Impressionné par l'animation sur toile? C'est plus que l'élément canvas de HTML5 peut faire, et cela s'appelle l'effet 3D. Les développeurs peuvent s'appuyer sur des éléments de canevas, DOM et 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 flux de photos de Flickr.

canvas3d et flickr HTML5 Showcase: 48 démos de destruction Flash potentielle

Simulation de tissu

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

simulation de tissu Vitrine HTML5: 48 démos de destruction Flash potentielle

Monstre en évolution

Observez un monstre évoluer en une créature compliquée, l'un de ses créateurs est HTML5.

Vitrine HTML5 de monstre en évolution: 48 démos de destruction Flash potentielle

Coffret Google

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

google giftbox Vitrine HTML5: 48 démos de destruction Flash potentielle

JSTouch

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

js touch HTML5 Showcase: 48 démos de destruction Flash potentielle

Présentation des données

Bien que l'élément canvas de HTML5 puisse être utilisé pour créer une animation et un effet 3D, il peut également être implémenté pour présenter des données mathématiques.

GnuplotGenericName

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

Vitrine HTML5 de gnuplot: 48 démos de destruction Flash potentielle

RGraphique

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

Présentation de rgraph HTML5: 48 démos de destruction Flash potentielle

Application Web

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

ToilePeinture

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

canvaspaint HTML5 Showcase: 48 démos de destruction Flash potentielle

ToileMol

Une application scientifique conçue pour vous aider à comprendre la structure de certains éléments terrestres.

Canvasmol HTML5 Showcase: 48 démos de destruction Flash potentielle

Constructeur de dessin animé

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

cartoon builder HTML5 Showcase: 48 démos de destruction Flash potentielle

Faites glisser n'importe quoi ici

Faites glisser tout ce que vous pouvez faire glisser dans la démo pour afficher les détails.

faites glisser n'importe quoi ici Vitrine HTML5: 48 démos de destruction Flash potentielle

Croquis Gartic

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

Gartic sketch Vitrine HTML5: 48 démos de destruction Flash potentielle

PhysiqueSketch

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

Physicsketch HTML5 Showcase: 48 démos de destruction Flash potentielle

Sketchpad

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

sketchpad HTML5 Showcase: 48 démos de destruction Flash potentielle

Petite conversation

Une application Web qui confirme la position géographique des messages météorologiques acquis à partir de Twitter, les formant ainsi en une carte `` météo sociale '' sur toile, assez triviale (comme indiqué par l'auteur) mais intéressante.

Smalltalk HTML5 Showcase: 48 démos de destruction Flash potentielle

Jeux

3 ennuyé

Vous ne vous ennuierez jamais si vous pouvez continuer à contourner des centaines de puces HTML5 dans la seconde qui suit.

Vitrine HTML3 5bored: 48 démos de destruction Flash potentielle

Éclater

Faites rebondir la balle pour casser toutes les briques.

Breakout HTML5 Showcase: 48 démos de destruction Flash potentielle

Toile de fond

Ce n'est pas tout à fait un jeu, mais cela montre comment HTML5 peut être utilisé pour développer un jeu par navigateur First Person Shooting.

Canvascape HTML5 Showcase: 48 démos de destruction Flash potentielle

Attrape ça

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

catch it Vitrine HTML5: 48 démos de destruction Flash potentielle

Réaction en chaîne

Chaîne l'explosion pour atteindre l'objectif, ne deviens pas accro.

Vitrine HTML5 de réaction en chaîne: 48 démos de destruction Flash potentielle

Sortie cube

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

cubeout HTML5 Showcase: 48 démos de destruction Flash potentielle

etchaPhysique

Dessinez un objet pour déplacer la balle vers l'étoile, n'oubliez pas la gravité.

Etchaphysics Vitrine HTML5: 48 démos de destruction Flash potentielle

Puzzle

Cliquez, faites pivoter et déposez des pièces de puzzle pour résoudre ce puzzle basé sur HTML5.

jigsaw puzzle HTML5 Showcase: 48 démos de destruction Flash potentielle

slide Puzzle

Glissez vers la victoire, un autre jeu HTML5 conçu pour vous ressourcer.

slide puzzle HTML5 Showcase: 48 démos de destruction Flash potentielle

Même jeu

Supprimez un certain groupe pour obtenir un autre groupe de la même couleur et vous obtiendrez finalement une victoire.

même jeu Vitrine HTML5: 48 démos de destruction Flash potentielle

Tetris

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

Vitrine tetris HTML5: 48 démos de destruction Flash potentielle

Torus

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

Torus HTML5 Showcase: 48 démos de destruction Flash potentielle


Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués avec *

*

*

  1. Responsable des données: Miguel Ángel Gatón
  2. Finalité des données: Contrôle du SPAM, gestion des commentaires.
  3. Légitimation: votre consentement
  4. Communication des données: Les données ne seront pas communiquées à des tiers sauf obligation légale.
  5. Stockage des données: base de données hébergée par Occentus Networks (EU)
  6. Droits: à tout moment, vous pouvez limiter, récupérer et supprimer vos informations.

  1.   sucette dit

    LE TETRIS NE VA PAS, J'AI METTE DEUX PIECES ET SE REPOSE MAIS LE RESTE EST TRES COOL CHAVALES

  2.   Elisa dit

    J'adore cette page ... sauf le premier jeu. Je t'aime Fran =)
    Bye un bisou au monde trop

  3.   Helsique dit

    Incroyable, spectaculaire. Je ne peux pas croire à quel point le développement Web est venu!

  4.   Joe Véga dit

    Je ne sais pas pourquoi ces ressources sont attribuées au HTML5, c'est du pur Javascript, avant la montée en puissance de Flash, avec Javascript tout cela pouvait être fait, il y avait une étude à Barcelone qui a fait des sites qui à l'époque m'ont fait sauter la tête tout en javascript tellement que j'ai appris d'eux et conçu un couple avec des balles rebondissantes et tout, je les ai complètement perdus et je le regrette toujours. Je ne me souviens pas du nom du studio, c'était quelque chose comme you2 ou 2you2 qui était en 98 environ.

  5.   ASDF dit

    Joe Vega …… cela montre que vous n'avez aucune putain d'idée de HTML5… .lol

  6.   Joe Véga dit

    Vous n'avez peut-être aucune idée html5 sanglante, c'est vrai, mais vous confondez le coq avec le poulailler et ne différenciez pas une langue d'un environnement. Je vous mets au défi de faire un exemple comme ceux ici sans utiliser Javascript, uniquement avec html5, et vous comprendrez ce que je voulais dire dans le post que j'ai supprimé. De plus, j'ai regardé le code source des exemples et il y en a plusieurs qui peuvent être facilement réalisés sans avoir à le monter sur html5.
    Ce html5 apporte de nombreuses améliorations et des choses qui facilitent beaucoup est vrai, mais les lauriers de la chose fantastique qui est montrée sur cette page est Javascript.

  7.   santiago barcheta dit

    Je suis intéressé à faire des présentations de ce type ... avez-vous un tutoriel ou une page avec des ressources ??? Merci!!!