HTML5-webbplatsvisning: 48 potentiella Flash-dödande demos

Du har hört alla rykten om att HTML5 skulle ta över Adobe Flash. Även om de flesta webbcommunityns argumenterar om att det är möjligt eller inte, måste du undra vad som gör HTML5 så kraftfullt att till och med jätteföretaget Apple vill använda det för att ersätta Flash.

Det är därför det här inlägget finns, vi kommer inte att prata om vad HTML5 kan göra, utan visa live-demonstrationer av magiska saker som HTML5 kan åstadkomma med andra språk som JavaScript, så gör dig redo för att bli inspirerad.

Notera: Eftersom HTML5 inte stöds fullt ut av vissa webbläsare som Internet Explorer, rekommenderas starkt att du använder webbläsaren Firefox för att se alla HTML5-demonstrationer nedan.

Animation

HTML5:s canvas-element är den avgörande faktorn för att HTML5 ska ersätta vissa Flash-animationer. Det gör det möjligt att bygga dynamisk, skriptbar rendering av 2D-former och bitmappbilder med Javascript, vilket med andra ord är kontrollerbar animation.

Audioburst Animation

En bekväm och fantastisk animation som skapats med HTML5:s canvas- och ljudtagg.

Bollpoolen

Den här demotypen, som visades upp på Google I/O:s senaste evenemang, visar hur dynamisk HTML5 kan vara.

Blob Sallad

En HTML5-spawnad varelse som skulle glädja dig.

Bomomo

Med Bomomo kan du observera olika atomrörelser simulerade med HTML5.

Browser Ball

Förundras du över den här HTML5-bollen för olika webbläsare.

Bubbles

Att ha kul genom att skapa oändligt många flytande bubblor med olika färger.

Canvas Cartoon Animation

En enkel och rolig HTML5-tecknadfilm som hjälper dig att förstå vad HTML5:s canvas-element kan göra.

Coolclock

En trevlig, anpassningsbar analog klocka byggd med HTML5 och JavaScript.

Flickr PS3 Slideshow

Visa dina Flickr-foton med ett bildspel i PS3-stil i webbläsaren.

Interaktiv Polaroid

En interaktiv demo som fungerar ungefär som ett gränssnitt med flera beröringspunkter.

JS Fireworks

Njut av fyrverkeriet med din önskade gravitation och hastighet, med hjälp av HTML5 och Javascript.

Kalejdoskop

Ett mycket vackert och futuristiskt HTML5-kalejdoskop.

Liquid Particles

Känslig partikelanimation som reagerar baserat på din musrörelse.

Mesmerizer

En annan känslig och enastående HTML5-demo som visar hur närliggande element reagerar på din musrörelse.

Nebula Cloud

Försvinn bort med den här underbara HTML5-nebulosan.

Parallax

Visa alla 2D-former i parallellt perspektiv.

Partikelanimation

En elegant HTML5-partikelanimation som kan formas till ditt önskade budskap.

Spread

Finn dig vilse med den här ändlösa spridningsanimationen.

Stjärnfält

En mycket cool HTML5-animation för stjärnfält som ändrar riktning och hastighet beroende på din musrörelse.

Video Destruction

Ett klick för att bomba en spelande video.

Vågform

Observera hur HTML5:s canvasvåg rör sig genom att ändra dess amplitud, våglängd, bredd osv.

3D-effekt

Bryt av canvasanimation? Det är mer som HTML5:s canvas-element kan göra, och det kallas 3D-effekt. Utvecklare kan förlita sig på canvaselementet, DOM och JavaScript för att skapa 3D-effekter, som senare kan utvecklas till 3D-animationer eller spel.

Canvas3D och Flickr

Få en helt ny 3D-upplevelse med Flickrs fotostream.

Tygsimulering

En realistisk, HTML5-baserad tygsimulering.

Evolverande monster

Observera ett monster som utvecklas till en komplicerad varelse, en av dess skapare är HTML5.

Google Giftbox

Gigantens sökmotor Google presenteras i 3D, spelbar vy.

JS Touch

En högkvalitativ och realistisk ”3D på 2D Canvas” showcase.

Datapresentation

Men HTML5:s canvas-element kan användas för att skapa animationer och 3D-effekter, men det kan också användas för att presentera matematiska data.

Gnuplot

Gnuplot, ett program för dataplottning i HTML5-version.

RGraph

RGraph erbjuder ett brett utbud av datapresentationer som stapeldiagram, framstegsdiagram och traditionella radardiagram.

Webbapplikation

Med hjälp av alla möjligheter som kombineras av HTML5 och andra språk kan man skapa interaktiva applikationer eller spel som ligger nära Flash-applikationen.

CanvasPaint

Vittnesmålet är att Microsoft Paint:s bror kommer in i din webbläsare, och hans far är HTML5.

CanvasMol

En vetenskaplig applikation som är byggd för att hjälpa dig att förstå vissa jordelements struktur.

Cartoon Builder

Teckna en intressant tecknad bild med den här minimala och interaktiva tecknade konstruktören.

Drag Anything Here

Drag allt du kan dra i demotypen för att visa detaljer.

Gartic Sketch

En originell HTML5-applikation som gör det möjligt för dig att göra några grundläggande ritningar som kan sparas i olika bildformat som jpeg eller png.

PhysicSketch

Rita vad du vill och se hur de reagerar med simulerad gravitation.

Sketchpad

En kraftfull HTML5-ritningsapplikation som gör det möjligt för dig att rita och redigera din bild på ett exakt sätt.

Smalltalk

En webbapplikation som bekräftar den geografiska positionen för väderrelaterade meddelanden som erhållits från Twitter och på så sätt formar dem till en canvasbaserad ”social weather”-karta, ganska trivialt (enligt författaren) men intressant.

Spel

3Bored

Du skulle aldrig bli uttråkad om du kan fortsätta att undvika hundratals HTML5-kulor i nästa sekund.

Breakout

Rebound the ball to break all bricks.

Canvascape

Inte riktigt ett spel, men det visar hur HTML5 kan användas för att utveckla ett webbläsarspel för First Person Shooting.

Catch It

Hur många bollar kan du undvika för att få din vinnande HTML5-ruta?

Chain Reaction

Kedja explosionen för att nå målet, bli inte beroende.

Cubeout

Spela Tetris i 3D, vy uppifrån och ner.

etchaPhysics

Teckna föremål för att flytta bollen till stjärnan, glöm inte bort gravitationen.

Pussel

Klicka, rotera och släpp pusselbitar för att lösa detta HTML5-baserade pussel.

Slide Puzzle

Slide till segern, ett annat HTML5-spel som är byggt för att pressa din hjärna juice.

Same Game

För bort en viss grupp för att få en annan grupp parad i samma färg och du skulle så småningom bli belönad med en seger.

Tetris

Ett av de mest klassiska spelen som väckts till liv igen av HTML5.

Torus

Ännu ett Tetris-spel i pseudo-3D-version.

Slutsats

Vad är begränsningen för HTML5? I dagsläget kan vi inte avgöra det, men med den imponerande videon nedan kan vi se hur långt HTML5 har drivits:

Ja, det är Quake II i webbläsaren, så nu står det klart att med HTML5 kommer fler banbrytande webbapplikationer att födas för att betjäna miljarder internetanvändare. Den är snabb, den utvecklas och den förändrar World Wide Web. Frågan är hur du skulle använda denna spelförändrande HTML5?

Vi vill gärna höra dina idéer!

Lämna ett svar

Din e-postadress kommer inte publiceras.