- 29
L’élément <canvas> a été une révélation pour les experts visuels dans nos rangs. Canvas fournit les moyens de réaliser des animations incroyables et efficaces, avec en prime l’absence de Flash ; ces développeurs peuvent exhiber leurs impressionnantes compétences en JavaScript à la place. Voici neuf démos canvas incroyables qui vous feront décrocher la mâchoire !
Zen Photon Garden
La démo Zen Photon Garden est l’épitomé de l’époustouflant. Cette démo de toile épique permet de dessiner sur la toile avec des flux lumineux réactifs, permettant à l’utilisateur de voir le produit final de sa nouvelle ligne sera. Encore mieux, cette démo vous permet d’enregistrer et de charger la sortie.
Tear-able Cloth
La démo Tear-able Cloth a enflammé le web au cours des derniers mois et pour une bonne raison. Cette démo est la plus fluide que vous verrez et compte tenu de la tâche qu’elle accomplit et du peu de code impliqué, elle vous coupera le souffle. Il y a plus que la simple traction et la physique : l’animation et la nécessité de prendre en compte la traction suffisamment forte pour animer élégamment une déchirure rendent cette démo encore plus étonnante. Une illustration parfaite des capacités de canvas.
Check out this Pen!
Particles
Check out this Pen!
Motion Graphic Typeface
J’aimerais pouvoir décrire comment cet effet est réalisé mais je ne peux pas. Je vois que chaque lettre est composée de différentes données d’image, mais c’est à peu près tout. Ce que je peux dire, c’est que cette animation est absolument époustouflante, car les lettres s’animent en place et l’aspect auquel vous voyez le texte dépend de la position de votre souris. Choquant.
Check out this Pen!
Motion Graphic Typeface II
Comme si la première n’était pas assez impressionnante, la deuxième démo de MGT est une démo digne d’un prix Pulitzer. Je donnerais mes deuxième, troisième et huitième naissances pour être aussi intelligent. Non seulement le texte s’anime, mais il y a un incroyable flou coloré qui fait partie de l’animation. Cette démo est vraiment un spectacle à voir.
Check out this Pen!
Gestes + Reveal.JS
Maintenant, cette démo m’a seulement époustouflé, mais elle a aussi époustouflé mon CPU. Cet exercice utilise la caméra et le microphone de votre appareil pour déplacer un cube de données en fonction des gestes. Si vous avez un MacBook Pro, vous ne devriez pas mourir avant de l’avoir essayé. Lancez la démo et agitez vos bras dans tous les sens – vous verrez le contenu de la démo bouger et vous commencerez alors à croire aux esprits.
Free Rider 2
On ne peut pas couvrir l’awesomeness de canvas sans inclure au moins un jeu. Canvas est sans doute l’avenir du jeu HTML5, comme le démontrera bientôt Firefox OS. Ce jeu de vélo brillant mais simple montre que le canvas est prêt pour le prime time !
30 000 Particles
La démo de 30k Particles incorpore des trucs vraiment géniaux : des formes circulaires (rayon), des particules animées qui explosent et reviennent, et des écouteurs de souris pour permettre à l’utilisateur de contrôler les explosions. Un excellent exemple d’interactivité et de logique.
Check out this Pen!
HTML5 Video Destruction
Je dois rendre hommage à l’une des premières démos de toile vraiment accrocheuses que j’ai vues — une vidéo de toile explosible. Vous cliquez sur la vidéo et les morceaux explosent, pourtant la vidéo continue de lire son segment/position pendant l’explosion tandis qu’elle revient à sa position initiale. Une démo inspirante pour nous tous.
