HTML5 Website Showcase: 48 Potential Flash-Killing Demos

Dus je hebt alle geruchten gehoord over HTML5 dat Adobe Flash zou overnemen. Hoewel de meeste webcommunity’s het er niet over eens zijn of dit wel of niet mogelijk is, vraagt u zich vast af wat HTML5 zo krachtig maakt dat zelfs het grote bedrijf Apple het wil gebruiken om Flash te vervangen.

Daarom bestaat dit bericht, we gaan het niet hebben over wat HTML5 kan, maar laten live demo’s zien van magische dingen die HTML5 kan bereiken met andere talen zoals JavaScript, dus maak u klaar om geïnspireerd te raken.

Opmerking: Omdat HTML5 door bepaalde webbrowsers, zoals Internet Explorer, niet volledig wordt ondersteund, wordt u sterk aangeraden Firefox te gebruiken om alle HTML5-demo’s hieronder te bekijken.

Animatie

Het canvas-element van HTML5 is de beslissende factor voor HTML5 om bepaalde Flash-animaties te vervangen. Je kunt er dynamische, scriptbare rendering van 2D-vormen en bitmapafbeeldingen mee bouwen met Javascript, wat met andere woorden, bestuurbare animatie is.

Audioburst Animation

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

Ball Pool

Deze demo, die tijdens het laatste Google I/O-evenement werd vertoond, laat zien hoe dynamisch HTML5 kan zijn.

Blob Sallad

Een HTML5-gepaard wezen dat u zou bevallen.

Bomomo

Met Bomomo kunt u verschillende atomaire bewegingen bekijken die met HTML5 worden gesimuleerd.

Browser Ball

Verbaast u met deze ‘cross-browser’ HTML5-bal.

Bubbles

Lol door eindeloos zwevende bubbels met verschillende kleuren te maken.

Canvas Cartoon Animation

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 je Flickr-foto’s met een PS3-stijl slideshow in de webbrowser.

Interactive Polaroid

Een interactieve demo die vrij gelijkaardig werkt als een multi touch interface.

JS Fireworks

Geniet van het vuurwerkmoment met de zwaartekracht en snelheid van uw voorkeur, aangedreven door HTML5 en Javascript.

Kaleidoscoop

Een zeer mooie en futuristische HTML5-kaleidoscoop.

Liquid Particles

Sensitieve deeltjesanimatie die reageert op basis van uw muisbeweging.

Mesmerizer

Een andere gevoelige en uitstekende HTML5-demo die laat zien hoe nabije elementen reageren op uw muisbeweging.

Nebula Cloud

Verlies uzelf met deze wonderlijke HTML5 nevel.

Parallax

Bekijk alle 2D vormen in parallel perspectief.

Particle Animation

Een elegante HTML5-deeltjesanimatie die zich kan vormen tot de door u gewenste boodschap.

Spread

Verlies u met deze eindeloze spreidanimatie.

Starfield

Een zeer coole HTML5-sterrenveldanimatie die van richting en snelheid verandert op basis van uw muisbeweging.

Video Destruction

Met één klik kun je een video die wordt afgespeeld de grond in boren.

Golfvorm

Bekijk hoe de canvasgolf van HTML5 beweegt door de amplitude, golflengte, breedte, enzovoort te veranderen.

3D-effect

Gedrukt door canvasanimatie? Dat is meer wat het canvaselement van HTML5 kan doen, en het wordt 3D-effect genoemd. Ontwikkelaars kunnen vertrouwen op het canvaselement, DOM en JavaScript om 3D-effecten te maken, die later kunnen worden ontwikkeld tot 3D-animatie of -spel.

Canvas3D en Flickr

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

Doeksimulatie

Een realistische, op HTML5 gebaseerde doeksimulatie.

Evoluerend Monster

Observeer hoe een monster zich ontwikkelt tot een gecompliceerd wezen, waarvan de maker HTML5 is.

Google Giftbox

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

JS Touch

Een hoge kwaliteit en realistische ‘3D op 2D Canvas’ showcase.

Data Presentation

Het canvas-element van HTML5 kan worden gebruikt om animaties en 3D-effecten te maken, maar het kan ook worden gebruikt om wiskundige gegevens te presenteren.

Gnuplot

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

RGraph

RGraph biedt een breed scala van presentatie van gegevens zoals staafdiagram, voortgangsbalk en traditionele radardiagram.

Web Application

Met behulp van alle mogelijkheden die door HTML5 en andere talen worden gecombineerd, kan men uiteindelijk een interactieve toepassing of spel maken dat dicht in de buurt komt van Flash-toepassingen.

CanvasPaint

Waarom het broertje van Microsoft Paint in uw webbrowser komt, en zijn vader is HTML5.

CanvasMol

Een wetenschappelijke toepassing die is gebouwd om u te helpen de structuur van bepaalde aardelementen te begrijpen.

Cartoon Builder

Teken interessante cartoonafbeeldingen met deze minimale en interactieve cartoonbouwer.

Drag Anything Here

Drag anything you can sleep in the demo to show details.

Gartic Sketch

Een originele HTML5 applicatie waarmee u een aantal basis tekeningen kunt maken die kunnen worden opgeslagen in verschillende afbeeldingsformaten zoals jpeg of png.

PhysicSketch

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

Sketchpad

Een krachtige HTML5 tekentoepassing waarmee je kunt tekenen en je afbeelding op een precieze manier kunt bewerken.

Smalltalk

Een webapplicatie die de geografische positie bevestigt van weer-gerelateerde berichten die zijn verkregen van Twitter, en deze zo vormt tot een op canvas gebaseerde ‘sociaal weer’-kaart, vrij triviaal (zoals de auteur stelt) maar interessant.

Game

3Bored

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

Breakout

Stoot de bal om alle stenen te breken.

Canvascape

Niet echt een spel, maar het demonstreert hoe HTML5 kan worden gebruikt om een First Person Shooting browserspel te ontwikkelen.

Catch It

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

Chain Reaction

Houd de explosie vast om het doel te bereiken, raak niet verslaafd.

Cubeout

Speel Tetris in 3D, bovenaanzicht.

etchaPhysics

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

Puzzel

Klik, draai en laat puzzelstukjes vallen om deze HTML5-gebaseerde puzzel op te lossen.

Glij Puzzel

Glij naar de overwinning, nog een HTML5-spel dat is gebouwd om je geest te laten knijpen sap.

Same Game

Verwijder een bepaalde groep om een andere groep in dezelfde kleur te krijgen en je zou uiteindelijk een overwinning krijgen.

Tetris

Een van de meest klassieke spellen die door HTML5 weer tot leven is gewekt.

Torus

Een ander Tetris-spel in pseudo-3D-versie.

Conclusie

Wat is de beperking van HTML5? Op dit moment kunnen we daar nog niet over beslissen, maar met de indrukwekkende video hieronder kunnen we weten hoe ver HTML5 is doorgedrukt:

Ja, het is Quake II in de webbrowser, dus het is nu heel duidelijk dat met HTML5 nog meer baanbrekende webtoepassingen zullen ontstaan om miljarden internetgebruikers van dienst te zijn. Het is snel, het ontwikkelt zich, en het verandert het world wide web. De vraag is, hoe zou u deze spel-veranderende HTML5 gebruiken?

We horen graag uw idee!

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.