48 brutala HTML5 / CSS3-demos

canvas tecknad animation HTML5 Showcase: 48 Potentiella Flash Killing Demos

Jag tar det här inlägget för att lösa en fråga du nyligen ställde i kommentarerna till en artikel:

När är det bra att börja designa helt med HTML5?

Ärligt talat beror det på det mål du riktar dig till. Om du inte planerar att dina besökare ska använda Internet Explorer (t.ex.: Mac-mjukvarusida) börja du genast med HTML5, men om du behöver personer med IE för att se din webbplats, vänta ...

Om ingången, långt efter hoppet, 48 demos av HTML5 som är fantastiska och förtjänar att ses. Stor är liten.

Källa | HongKiat

audioburst animation

En bekväm och fantastisk animation skapad med HTML5s duk och ljudtagg.

audioburst animation HTML5 Showcase: 48 Potentiella Flash-dödande demo

Bollhav

Att visas i den senaste Google I / O-händelsen, visar denna demo dig hur dynamisk HTML5 kan vara.

ball pool HTML5 Showcase: 48 Potentiella Flash-dödande demo

Blob sallad

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

blob sallad HTML5 Showcase: 48 Potentiella Flash-dödande demo

bomomo

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

bomomo HTML5 Showcase: 48 Potentiella Flash-dödande demo

Webbläsarboll

Bli förvånad över denna HTML5-boll med "webbläsare".

webbläsarboll HTML5 Showcase: 48 Potentiella Flash-dödande demo

Bubbles

Ha kul genom att skapa oändliga flytande bubblor med olika färger.

bubblor HTML5 Visa: 48 Potentiella Flash-dödande demo

Canvas tecknad filmanimering

En enkel och rolig HTML5-tecknad film som hjälper dig att förstå vad HTML5s dukelement kan göra.

canvas tecknad animation HTML5 Showcase: 48 Potentiella Flash Killing Demos

Coolklocka

En fin, anpassningsbar analog klocka byggd av HTML5 och JavaScript.

coolclock HTML5 Showcase: 48 Potentiella Flash-dödande demo

Flickr PS3 Bildspel

Se dina Flickrs foton med PS3-stil bildspel i webbläsaren.

flickr ps3 bildspel HTML5 Showcase: 48 Potentiella Flash-dödande demo

Interaktiv Polaroid

En interaktiv demo som fungerar ganska likt multi touch-gränssnittet.

interaktiv polaroid HTML5 Showcase: 48 Potentiella Flash-dödande demo

JS Fireworks

Njut av fyrverkerimomentet med din önskade tyngdkraft och hastighet, drivs av HTML5 och Javascript.

js fyrverkerier HTML5 Showcase: 48 Potentiella Flash-dödande demonstrationer

Kalejdoskop

Ett mycket vackert och futuristiskt HTML5-kalejdoskop.

kalejdoskop HTML5 Showcase: 48 Potentiella Flash-dödande demonstrationer

Flytande partiklar

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

flytande partiklar HTML5 Showcase: 48 Potentiella Flash-dödande demo

Mesmerizer

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

mesmerizer HTML5 Showcase: 48 Potentiella Flash-dödande demo

Nebulosa moln

Gå vilse med den här underbara HTML5-nebulosan.

nebulosa moln HTML5 Showcase: 48 Potentiella Flash-dödande demo

Parallax

Visa alla 2D-former i parallellt perspektiv.

parallax HTML5 Showcase: 48 Potentiella Flash-dödande demo

Partikelanimering

En elegant HTML5-partikelanimering som kan bildas till ditt önskade meddelande.

partikelanimering HTML5 Showcase: 48 Potentiella Flash-dödande demo

Sprid

Gå vilse med den oändliga spridningsanimationen.

sprida HTML5 Showcase: 48 Potentiella Flash Killing Demos

Starfield field~~POS=HEADCOMP

En väldigt cool HTML5-starfield-animation som skulle ändra riktning och hastighet baserat på din musrörelse.

starfield HTML5 Showcase: 48 Potentiella Flash-dödande demo

Video förstörelse

Ett klick för att lyssna på en spelande video.

video förstörelse HTML5 Showcase: 48 Potentiella Flash Killing Demos

Waveform

Lägg märke till hur HTML5s kanvasvåg rör sig genom att ändra dess amplitud, våglängd, bredd etc.

vågform HTML5 Showcase: 48 Potentiella Flash-dödande demo

3D-effekt

Imponerad av canvasanimation? Det är mer HTML5s canvaselement kan göra, och det kallas 3D-effekt. Utvecklare kan lita på canvas-element, DOM och JavaScript för att skapa 3D-effekt, som senare kan utvecklas till 3D-animering eller spel.

Canvas3D och Flickr

Få en helt ny 3D-upplevelse med Flickrs fotoström.

canvas3d och flickr HTML5 Showcase: 48 Potentiella Flash-dödande demo

Tygsimulering

En realistisk, HTML5-baserad tygsimulering.

tygsimulering HTML5 Showcase: 48 Potentiella Flash-dödande demo

Utvecklande monster

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

utvecklande monster HTML5 Showcase: 48 Potentiella Flash-dödande demo

Google Presentlåda

Jätte sökmotor Google presenteras i 3D, spelbar vy.

google presentbox HTML5 Showcase: 48 Potentiella Flash-dödande demonstrationer

JS Touch

En högkvalitativ och realistisk '3D on 2D Canvas' utställning.

js touch HTML5 Showcase: 48 Potentiella Flash-dödande demo

Data Presentation

Medan HTML5s canvaselement kan användas för att skapa animering och 3D-effekt kan det också implementeras för att presentera matematiska data.

gnuplot

Gnuplot, en dataplotningsprogram i HTML5-version.

gnuplot HTML5 Showcase: 48 Potentiella Flash-dödande demo

RGraph

RGraph erbjuder ett brett utbud av datapresentationer som stapeldiagram, förloppsindikator och traditionellt radardiagram.

rgraph HTML5 Showcase: 48 Potentiella Flash-dödande demonstrationer

Webbapplikation

I slutändan kan man använda alla möjligheter kombinerade med HTML5 och andra språk, skapa interaktiva applikationer eller spel som ligger nära Flash-applikationen.

CanvasPaint

Vittne om bror till Microsoft Paint kommer in i din webbläsare, och hans far är HTML5.

canvaspaint HTML5 Showcase: 48 Potentiella demonstrationer för Flash-dödande

CanvasMol

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

canvasmol HTML5 Showcase: 48 Potentiella Flash-dödande demo

Tecknad filmbyggare

Rita intressant tecknad bild med denna minimala och interaktiva tecknad filmbyggare.

tecknad byggare HTML5 Showcase: 48 Potentiella Flash Killing Demos

Dra allt hit

Dra allt du kan dra i demo för att visa detaljer.

dra vad som helst här HTML5 Showcase: 48 Potentiella Flash-dödande demo

Gartisk skiss

En original HTML5-applikation som låter dig göra några grundläggande ritningar som kan sparas i olika bildformat som jpeg eller png.

gartisk skiss HTML5 Showcase: 48 Potentiella Flash Killing Demos

PhysicSketch

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

physicsketch HTML5 Showcase: 48 Potentiella Flash-dödande demonstrationer

skiss

En kraftfull HTML5-ritapplikation som gör att du kan rita och redigera din bild på exakt sätt.

sketchpad HTML5 Showcase: 48 Potentiella Flash-dödande demo

Småprat

En webbapplikation som bekräftar den geografiska positionen för väderrelaterat meddelande som förvärvats från Twitter och därmed bildar dem till en dukbaserad 'social väderkarta', ganska trivial (som författaren säger) men intressant.

smalltalk HTML5 Showcase: 48 Potentiella demonstrationer för Flash-dödande

Spel

3Borrad

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

3bored HTML5 Showcase: 48 Potentiella Flash-dödande demo

Bryta ut

Slå tillbaka bollen för att bryta alla tegelstenar.

breakout HTML5 Showcase: 48 Potentiella Flash-dödande demonstrationer

Canvascape

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

canvascape HTML5 Showcase: 48 Potentiella Flash-dödande demo

Fånga den

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

fånga det HTML5 Showcase: 48 Potentiella Flash-dödande demo

Chain Reaction

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

kedjereaktion HTML5 Showcase: 48 Potentiella Flash-dödande demo

kub ut

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

kubout HTML5 Showcase: 48 Potentiella Flash-dödande demonstrationer

etchaFysics

Rita objekt för att flytta bollen till stjärnan, glöm inte allvaret.

etchaphysics HTML5 Showcase: 48 Potentiella Flash-dödande demo

Jigsaw Puzzle

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

pussel HTML5 Showcase: 48 Potentiella Flash-dödande demo

Slide Puzzle

Skjut till segern, ett annat HTML5-spel som är byggt för att pressa din hjärnsaft.

slide puzzle HTML5 Showcase: 48 Potentiella Flash-dödande demo

Samma spel

Ta bort vissa grupper för att få en annan grupp i samma färg och så småningom tilldelas du en seger.

samma spel HTML5 Showcase: 48 Potentiella Flash-dödande demo

Tetris

Ett av de mest klassiska spel som återupplivats av HTML5.

tetris HTML5 Showcase: 48 Potentiella Flash-dödande demo

Torus

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

torus HTML5 Showcase: 48 Potentiella Flash-dödande demo


Innehållet i artikeln följer våra principer om redaktionell etik. Klicka på för att rapportera ett fel här.

7 kommentarer, lämna din

Lämna din kommentar

Din e-postadress kommer inte att publiceras.

*

*

  1. Ansvarig för uppgifterna: Miguel Ángel Gatón
  2. Syftet med uppgifterna: Kontrollera skräppost, kommentarhantering.
  3. Legitimering: Ditt samtycke
  4. Kommunikation av uppgifterna: Uppgifterna kommer inte att kommuniceras till tredje part förutom enligt laglig skyldighet.
  5. Datalagring: databas värd för Occentus Networks (EU)
  6. Rättigheter: När som helst kan du begränsa, återställa och radera din information.

  1.   klubba sade

    TETRIS GÅR INTE, JAG SÄTT TVÅ STYCKAR OCH STÅND, MEN RESTEN ÄR MYCKET KYLA CHAVALES

  2.   Elisa sade

    Jag älskar den här sidan ... förutom det första spelet. Jag älskar dig Fran =)
    Hej en kyss till världen toooodooooooo

  3.   Helsic sade

    Otroligt, spektakulärt. Jag kan inte tro hur långt webbutveckling har kommit!

  4.   Joe vega sade

    Jag vet inte varför dessa resurser tillskrivs HTML5, det här är rent Javascript, innan Flash uppstod, med Javascript kunde du göra alla dessa saker, det fanns en studie i Barcelona som gjorde några webbplatser som vid den tiden slog mig, allt i javascript så mycket att jag lärde mig av dem och designade ett par med studsande bollar och allt, jag tappade dem helt och jag ångrar det fortfarande. Jag kommer inte ihåg namnet på studion, det var något som du2 eller 2you2 som var '98 eller så.

  5.   AsDF sade

    Joe Vega ... det visar att du inte har någon jävla idé om HTML5 ... .lol

  6.   Joe vega sade

    Du kanske inte har någon blodig html5-idé, det är sant, men du förväxlar tupp med kycklinghuset och skiljer inte ett språk från en miljö. Jag utmanar dig att göra ett exempel som de här utan att använda Javascript, bara med html5, och du kommer att förstå vad jag menade i inlägget som jag raderade. Dessutom har jag tittat på källkoden för exemplen och det finns flera som enkelt kan göras utan att montera den över html5.
    Att html5 ger många förbättringar och saker som underlättar mycket är sant, men lagren av det fantastiska som visas på denna sida är Javascript.

  7.   Santiago Barchetta sade

    Jag är intresserad av att göra presentationer av denna typ ... har du en handledning eller sida med resurser ??? Tack!!!