HTML5 Website Showcase: 48 de demonstrații care ar putea ucide Flash

Ai auzit toate zvonurile despre faptul că HTML5 va prelua Adobe Flash. În timp ce cea mai mare parte a comunității web susține că este posibil sau nu, trebuie să vă întrebați ce face HTML5 atât de puternic încât chiar și gigantul Apple vrea să îl folosească pentru a înlocui Flash.

De aceea există acest post, nu vom vorbi despre ce poate face HTML5, ci vom arăta demonstrații live de lucruri magice pe care HTML5 le poate realiza cu alte limbaje precum JavaScript, așa că pregătiți-vă să fiți inspirați.

Nota: Deoarece HTML5 nu este pe deplin suportat de anumite browsere web, cum ar fi Internet Explorer, vă recomandăm insistent să folosiți browserul Firefox pentru a vizualiza toate demonstrațiile HTML5 de mai jos.

Animare

Elementul canvas al HTML5 este factorul decisiv pentru ca HTML5 să înlocuiască anumite animații Flash. Acesta vă permite să construiți o redare dinamică, cu scripturi, a formelor 2D și a imaginilor bitmap cu Javascript, ceea ce, cu alte cuvinte, este o animație controlabilă.

Audioburst Animation

O animație confortabilă și fantastică creată cu canvas-ul HTML5 și tag-ul audio.

Ball Pool

Fost prezentată în cadrul ultimului eveniment Google I/O, această demonstrație vă arată cât de dinamic poate fi HTML5.

Blob Sallad

O creatură creată în HTML5 care v-ar face plăcere.

Bomomo

Cu Bomomo, puteți observa diferite mișcări atomice simulate cu HTML5.

Browser Ball

Să fiți uimit cu această minge HTML5 „cross-browser”.

Bubbles

Distrați-vă creând bule plutitoare nesfârșite cu culori diferite.

Canvas Cartoon Animation

Un desen animat HTML5 simplu și amuzant care vă ajută să înțelegeți ce poate face elementul canvas al HTML5.

Coolclock

Un ceas analogic drăguț și personalizabil construit prin HTML5 și JavaScript.

Flickr PS3 Slideshow

Vezi fotografiile tale de pe Flickr cu un slideshow în stil PS3 în browserul web.

Polaroid interactiv

Un demo interactiv care funcționează destul de asemănător cu interfața multi touch.

JS Fireworks

Descoperiți momentul focurilor de artificii cu gravitația și viteza pe care o preferați, cu ajutorul HTML5 și Javascript.

Kaleidoscop

Un caleidoscop HTML5 foarte frumos și futurist.

Particule lichide

Animare sensibilă a particulelor care reacționează în funcție de mișcarea mouse-ului.

Mesmerizer

O altă demonstrație HTML5 sensibilă și remarcabilă care arată cum reacționează elementele din apropiere în funcție de mișcarea mouse-ului dumneavoastră.

Nebula Cloud

Pierdeți-vă cu această minunată nebuloasă HTML5.

Parallax

Vezi toate formele 2D în perspectivă paralelă.

Animație de particule

O animație elegantă de particule HTML5 care se poate forma în mesajul preferat.

Spread

Pierdeți-vă cu această animație de răspândire fără sfârșit.

Starfield

O animație de câmp stelar HTML5 foarte mișto, care și-ar schimba direcția și viteza în funcție de mișcarea mouse-ului tău.

Distrugere video

Un singur clic pentru a bombarda un video în curs de redare.

Waveform

Observați cum se mișcă unda canvas din HTML5 modificându-i amplitudinea, lungimea de undă, lățimea, etc.

3D Effect

Impresionat de animația canvas? Asta este mai mult decât poate face elementul canvas din HTML5 și se numește efect 3D. Dezvoltatorul se poate baza pe elementul canvas, DOM și JavaScript pentru a crea efectul 3D, care mai târziu poate fi dezvoltat în animație 3D sau joc.

Canvas3D și Flickr

Aveți o experiență 3D cu totul nouă cu fluxul de fotografii de la Flickr.

Cloth Simulation

O simulare de pânză realistă, bazată pe HTML5.

Evolving Monster

Observați un monstru care evoluează într-o creatură complicată, unul dintre creatorii săi este HTML5.

Google Giftbox

Gigantul motor de căutare Google este prezentat în vizualizare 3D, jucabilă.

JS Touch

O prezentare de înaltă calitate și realistă „3D pe pânză 2D”.

Prezentare de date

În timp ce elementul Canvas din HTML5 poate fi folosit pentru a crea animații și efecte 3D, acesta poate fi implementat și pentru a prezenta date matematice.

Gnuplot

Gnuplot, o aplicație de trasare a datelor în versiune HTML5.

RGraph

RGraph oferă o gamă largă de prezentări de date, cum ar fi diagrama de bare, bara de progres și diagrama radar tradițională.

Aplicație web

În cele din urmă, folosind toate posibilitățile combinate de HTML5 și alte langauge, se poate crea o aplicație interactivă sau un joc care se apropie de aplicația Flash.

CanvasPaint

Vezi că fratele lui Microsoft Paint vine în browserul tău web, iar tatăl său este HTML5.

CanvasMol

O aplicație științifică care este construită pentru a vă ajuta să înțelegeți structura anumitor elemente ale pământului.

Cartoon Builder

Desenați imagini interesante de desene animate cu acest constructor de desene animate minimalist și interactiv.

Drag Anything Here

Trageți orice puteți trage în demo pentru a arăta detalii.

Gartic Sketch

O aplicație originală HTML5 care vă permite să faceți câteva desene de bază care pot fi salvate în diferite formate de imagine, cum ar fi jpeg sau png.

PhysicSketch

Desenați orice doriți și vedeți cum reacționează cu gravitația simulată.

Sketchpad

O aplicație puternică de desen HTML5 care vă permite să desenați și să editați imaginea în mod precis.

Smalltalk

O aplicație web care confirmă poziția geografică a mesajelor legate de starea vremii achiziționate de pe Twitter, formând astfel o hartă a „vremii sociale” pe bază de canvas, destul de banală (după cum afirmă autorul), dar interesantă.

Joc

3Bored

Nu te vei plictisi niciodată dacă poți continua să te ferești de sute de gloanțe HTML5 în următoarea secundă.

Breakout

Răsucește mingea pentru a sparge toate cărămizile.

Canvascape

Nu este chiar un joc, dar demonstrează cum HTML5 poate fi folosit pentru a dezvolta un joc de browser First Person Shooting.

Catch It

Câte mingi poți să te ferești pentru a obține pătratul HTML5 câștigător?

Chain Reaction

Înlănțuiți explozia pentru a atinge obiectivul, nu deveniți dependenți.

Cubeout

Jocă Tetris în 3D, vedere de sus în jos.

etchaPhysics

Desenează elementul pentru a muta mingea spre stea, nu uita de gravitație.

Jigsaw Puzzle

Clichează, rotește și aruncă piesele de puzzle pentru a rezolva acest puzzle jigsaw bazat pe HTML5.

Slide Puzzle

Slidează spre victorie, un alt joc HTML5 care este construit pentru a-ți stoarce sucul minții.

Same Game

Îndepărtați un anumit grup pentru a obține un alt grup împerecheat în aceeași culoare și, în cele din urmă, vi se va acorda o victorie.

Tetris

Unul dintre cele mai clasice jocuri readuse la viață de HTML5.

Torus

Încă un joc Tetris în versiune pseudo-3D.

Concluzie

Care este limitarea lui HTML5? În acest moment nu putem decide, dar cu ajutorul impresionantului videoclip de mai jos putem ști cât de departe a fost împins HTML5:

Da, este vorba de Quake II în browserul web, așa că acum este foarte clar că, cu HTML5, se vor naște mai multe aplicații web revoluționare pentru a servi miliarde de utilizatori de internet. Este rapid, evoluează și schimbă world wide web-ul. Întrebarea este, cum ați folosi acest HTML5 care schimbă jocul?

Ne-ar plăcea să vă auzim ideea!

.

Lasă un răspuns

Adresa ta de email nu va fi publicată.