HTML5 Website Showcase 48 mogelijke demo's met Flash-Killing

Dus je hebt gehoord dat alle geruchten over HTML5 Adobe Flash zouden overnemen. Hoewel de meeste webcommunity's beweren dat het mogelijk is of niet, moet u wel eens ronddwalen wat HTML5 zo krachtig maakt dat zelfs het gigantische bedrijf Apple het wil gebruiken om Flash te vervangen.

Daarom bestaat deze post, we gaan niet praten over wat HTML5 kan doen, maar laten we live demo's zien van magische dingen die HTML5 kan bereiken met andere talen zoals JavaScript, dus maak je op om geïnspireerd te worden.

Opmerking: aangezien HTML5 niet volledig wordt ondersteund door bepaalde webbrowsers zoals Internet Explorer, wordt u ten zeerste aangeraden Firefox te gebruiken om alle onderstaande HTML5-demo's te bekijken.

animatie

Het canvaselement van HTML5 is de beslissende factor voor HTML5 om bepaalde Flash-animatie te vervangen. Hiermee kunt u dynamische, scriptbare rendering van 2D-vormen en bitmapafbeeldingen bouwen met Javascript, wat met andere woorden bestuurbare animatie is.

Audioburst-animatie

Een comfortabele en fantastische animatie gemaakt met HTML5's canvas en audio-tag.

Ballenbad

Wordt gedemonstreerd tijdens het laatste Google I / O-evenement, en deze demo laat zien hoe dynamisch HTML5 kan zijn.

Blob Sallad

Een HTML5-uitgezet wezen dat jou zou plezieren.

Bomomo

Met Bomomo kunt u verschillende atomaire bewegingen observeren die met HTML5 zijn gesimuleerd.

Browser Ball

Laat je verbazen door deze 'cross-browser' HTML5-bal.

Bubbles

Veel plezier met het maken van eindeloze zwevende bubbels met verschillende kleuren.

Canvas Cartoon Animatie

Een eenvoudige en grappige HTML5-cartoon die u helpt te begrijpen wat het canvas-element van HTML5 kan doen.

Coolclock

Een mooie, aanpasbare analoge klok gebouwd door HTML5 en JavaScript.

Flickr PS3 Slideshow

Bekijk de foto's van je Flickr met een diavoorstelling in PS3-stijl in de webbrowser.

Interactieve polaroid

Een interactieve demo die redelijk veel lijkt op een multi-touch interface.

JS Fireworks

Geniet van het vuurwerk moment met uw gewenste zwaartekracht en snelheid, mogelijk gemaakt door HTML5 en Javascript.

Caleidoscoop

Een zeer mooie en futuristische HTML5-caleidoscoop.

Vloeibare deeltjes

Gevoelige deeltjesanimatie die reageert op basis van uw muisbeweging.

hypnotiseur

Nog een gevoelige en opvallende HTML5-demo die laat zien hoe nabije elementen reageren op uw muisbeweging.

Nebula Cloud

Verdwaal met deze wonderlijke HTML5-nevel.

Parallax

Bekijk alle 2D-vormen in parallel perspectief.

Deeltjesanimatie

Een elegante HTML5-deeltjesanimatie die zich kan vormen naar uw favoriete bericht.

Verspreiding

Verdwaal met deze eindeloze gespreide animatie.

starfield

Een zeer coole HTML5-starfield-animatie die van richting en snelheid zou veranderen op basis van je muisbeweging.

Video vernietiging

Eén klik om een ​​speelvideo te boosten.

waveform

Observeer hoe de canvasgolf van HTML5 beweegt door de amplitude, golflengte, breedte, enzovoort te wijzigen.

3D-effect

Onder de indruk van canvas-animatie? Dat is meer het canvas-element van HTML5, en het wordt 3D-effect genoemd. Ontwikkelaars kunnen vertrouwen op canvaselement, DOM en JavaScript om een ​​3D-effect te creëren, dat later kan worden ontwikkeld tot 3D-animatie of game.

Canvas3D en Flickr

Heb een hele nieuwe 3D-ervaring met de fotostream van Flickr.

Doeksimulatie

Een realistische, op HTML5 gebaseerde doeksimulatie.

Evoluerende Monster

Observeer een monster dat evolueert naar een gecompliceerd wezen, een van de makers is HTML5.

Google Giftbox

Gigantische zoekmachine Google wordt gepresenteerd in 3D, speelbare weergave.

JS Touch

Een hoogwaardige en realistische '3D op 2D Canvas' showcase.

Data presentatie

Hoewel het canvaselement van HTML5 kan worden gebruikt om animatie en 3D-effecten te maken, kan het ook worden geïmplementeerd om wiskundige gegevens te presenteren.

gnuplot

Gnuplot, een toepassing voor het plotten van gegevens in HTML5-versie.

RGraph

RGraph biedt een breed scala aan gegevenspresentatie zoals staafdiagram, voortgangsbalk en traditioneel radardiagram.

Web applicatie

Uiteindelijk kan men, met behulp van alle mogelijkheden gecombineerd met HTML5 en andere taal, een interactieve applicatie of spel creëren dat in de buurt van Flash-toepassing is.

CanvasPaint

Getuige de broer van Microsoft Paint komt in uw webbrowser en zijn vader is HTML5.

CanvasMol

Een wetenschappelijke toepassing die is gebouwd om u te helpen de structuur van een bepaald aardelement te begrijpen.

Cartoon Builder

Teken een interessante cartoonafbeelding met deze minimale en interactieve tekenfilmbouwer.

Sleep hier alles

Sleep alles dat u in de demo kunt slepen om details te tonen.

Gartic Sketch

Een originele HTML5-toepassing waarmee u enkele basistekeningen kunt maken die kunnen worden opgeslagen in een ander afbeeldingsformaat, zoals jpeg of png.

PhysicSketch

Teken wat je maar wilt en zie hoe ze reageren met gesimuleerde zwaartekracht.

schetsblok

Een krachtige HTML5-tekenapplicatie waarmee u uw afbeelding op de precieze manier kunt tekenen en bewerken.

Koetjes en kalfjes

Een webapplicatie die de geografische positie van het weergerelateerde bericht van Twitter bevestigt, waardoor ze wordt gevormd in een op canvas gebaseerde 'sociaal weer'-kaart, vrij triviaal (zoals vermeld door de auteur) maar interessant.

Spel

3Bored

Je zou je nooit vervelen als je in de volgende seconde honderden HTML5-kogels kunt ontwijken.

Uitbreken

Kaat de bal terug om alle stenen te breken.

Canvascape

Niet echt een spel, maar het laat zien hoe HTML5 kan worden gebruikt om First Person Shooting-browsergames te ontwikkelen.

Vang het

Hoeveel ballen kun je ontwijken om je winnende HTML5-vak te krijgen?

Kettingreactie

Keten de explosie om het doel te bereiken, versla je niet.

Cubeout

Speel Tetris in 3D, van boven naar beneden.

etchaPhysics

Teken item om de bal naar de ster te verplaatsen, vergeet de zwaartekracht niet.

Legpuzzel

Klik, draai en laat puzzelstukjes los om deze HTML5-legpuzzel op te lossen.

Slide Puzzle

Schuif naar de overwinning, nog een HTML5-game die is gebouwd om je hersensap te persen.

Hetzelfde spel

Verwijder een bepaalde groep om een ​​andere groep in dezelfde kleur te koppelen en je krijgt uiteindelijk een overwinning.

Tetris

Een van de meest klassieke games die door HTML5 weer tot leven is gebracht.

Torus

Nog een ander Tetris-spel in pseudo-3D-versie.

Conclusie

Wat is de beperking van HTML5? Op dit punt kunnen we niet beslissen, maar met de indrukwekkende video hieronder kunnen we weten hoever de HTML5 is gepusht:

Ja, het is Quake II in de webbrowser, dus nu is het heel duidelijk dat met HTML5 een meer baanbrekende webapplicatie zou worden ontwikkeld om miljarden internetgebruikers te dienen. Het is snel, het evolueert en het verandert het wereldwijde web. De vraag is, hoe zou u deze HTML5 die het spel zou veranderen, gebruiken?

We horen graag uw idee!