48 de demonstrații brutale HTML5 / CSS3

Utilizez această postare pentru a rezolva o întrebare pe care ați pus-o recent în comentariile unui articol:

Când este momentul potrivit pentru a începe să proiectezi pe deplin cu HTML5?

Ei bine, sincer, depinde de ținta pe care o vizați. Dacă nu intenționați ca vizitatorii dvs. să utilizeze Internet Explorer (de exemplu: pagina software-ului Mac), începeți imediat cu HTML5, dar dacă aveți nevoie de persoane cu IE pentru a vă vedea site-ul, ar fi bine să așteptați ...

La intrare, bine după salt 48 de demonstrații de HTML5 care sunt uimitoare și merită să fie văzute. Mare este puțin.

Sursa | HongKiat

aAnimație udioburst

O animație confortabilă și fantastică creată cu pânza și eticheta audio HTML5.

Bilă de bilă

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

Blob Salad

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

bomomo

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

Minge pentru browser

Fii uimit cu această minge HTML5 „cross-browser”.

Bubbles

Distrează-te creând bule plutitoare nesfârșite cu culori diferite.

Animație de desene animate canvas

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

coolclock

Un ceas analogic frumos, personalizabil, construit de HTML5 și JavaScript.

Slickhow pentru Flickr PS3

Vizualizați fotografiile Flickr-ului dvs. cu diapozitive în stil PS3 în browserul web.

Polaroid interactiv

Un demo interactiv care funcționează destul de similar cu interfața multi-touch.

JS Fireworks

Bucurați-vă de momentul focului de artificii cu gravitatea și viteza preferate, alimentate de HTML5 și Javascript.

Caleidoscop

Un caleidoscop HTML5 foarte frumos și futurist.

Particule lichide

Animație sensibilă a particulelor care reacționează pe baza mișcării mouse-ului.

Hipnotizator

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

Cloud Nebula

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

Papalaxă

Vizualizați toate formele 2D în perspectivă paralelă.

Animatie cu particule

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

Răspândi

Pierdeți-vă cu această animație de răspândire interminabilă.

Starfield

O animație HTML5 foarte frumoasă pe câmpul stelar, care ar schimba direcția și viteza pe baza mișcării mouse-ului.

Distrugere video

Un singur clic pentru a crește un videoclip redat.

Waveform

Observați cum se mișcă valul pânzei HTML5 modificându-i amplitudinea, lungimea de undă, lățimea etc.

Efect 3D

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

Canvas3D și Flickr

Experiența 3D complet nouă cu fluxul de fotografii Flickr.

Simulare pânză

O simulare realistă, bazată pe HTML5.

Monstru în evoluție

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

Cutie cadou Google

Motorul de căutare uriaș Google este prezentat în vizualizare 3D, redabilă.

J.S. Touch

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

Prezentarea datelor

În timp ce elementul pânzei HTML5 poate fi utilizat pentru a crea animație și efect 3D, poate fi implementat și pentru a prezenta date matematice.

gnuplot

Gnuplot, o aplicație de reprezentare a datelor în versiunea HTML5.

RGraph

RGraph oferă o gamă largă de prezentare a datelor, cum ar fi diagrama de bare, bara de progres și diagrama radar tradițională.

Aplicatie web

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

CanvasPaint

Martorul fratelui Microsoft Paint vine în browserul dvs. 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.

Constructor de desene animate

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

Trageți orice aici

Trageți orice puteți trage în demonstrație pentru a afișa detalii.

Schiță gartică

O aplicație HTML5 originală 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.

Schiță fizică

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

Bloc de schiță

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

Vorbă mică

O aplicație web care confirmă poziția geografică a mesajului legat de vreme achiziționat de pe Twitter, formându-le astfel într-o hartă bazată pe pânză „vreme socială”, destul de trivială (așa cum a afirmat autorul), dar interesantă.

Joc

3 Plictisit

Nu te-ai plictisi niciodată dacă poți sustrage sute de gloanțe HTML5 în următoarea secundă.

Izbucni

Ridicați mingea pentru a sparge toate cărămizile.

peisaj de pânză

Nu chiar un joc, dar demonstrează modul în care HTML5 poate fi folosit pentru a dezvolta jocul browserului First Person Shooting.

Prinde-l

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

Reacţie în lanţ

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

cubeout

Joacă Tetris în 3D, de sus în jos.

etchaFizică

Desenați elementul pentru a muta mingea către stea, nu uitați de gravitație.

Mozaic

Faceți clic, rotiți și fixați piesele puzzle-ului pentru a rezolva acest puzzle bazat pe HTML5.

Slide Puzzle

Glisați către victorie, un alt joc HTML5 construit pentru a vă stoarce sucul minții.

Același joc

Eliminați un anumit grup pentru a obține un alt grup asociat în aceeași culoare și, în cele din urmă, veți primi o victorie.

Tetris

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

Torus

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