48 brutalnih demonstracija HTML5 / CSS3

Ovim postom rješavam pitanje koje ste nedavno postavili u komentarima članka:

Kada je dobro vrijeme za potpuno dizajniranje s HTML5?

Pa, iskreno, to ovisi o cilju kojeg ciljate. Ako ne planirate da posjetitelji koriste Internet Explorer (npr. Stranicu softvera Mac), krenite odmah s HTML5, ali ako trebate ljude s IE da vide vašu web stranicu, radije pričekajte ...

Na početku, dobro nakon skoka, 48 demonstracija HTML5-a koje su nevjerojatne i zaslužuju biti viđene. Super je malo.

Izvor | HongKiat

audioburst Animacija

Udobna i fantastična animacija stvorena s HTML5 platnom i audio oznakom.

Bazen s loptom

Prikazan na posljednjem Google I / O događaju, ovaj vam pokaz pokazuje koliko dinamičan može biti HTML5.

Blob salata

HTML5 iznjedreno stvorenje koje bi vam bilo drago.

bomomo

Uz Bomomo možete promatrati različita kretanja atoma simulirana HTML5-om.

Lopta preglednika

Zapanjite se ovom HTML5 lopticom 'unakrsnog preglednika'.

Bubbles

Zabavite se stvarajući beskrajne plutajuće mjehuriće različite boje.

Animacija crtića na platnu

Jednostavan i smiješan HTML5 crtić koji vam pomaže razumjeti što HTML5 element platna može učiniti.

Cool sat

Lijep, prilagodljiv analogni sat koji su izradili HTML5 i JavaScript.

Projekcija slajdova Flickr PS3

Pregledajte fotografije svog Flickra pomoću prezentacije u PS3 stilu u web pregledniku.

Interaktivni polaroid

Interaktivni demo koji djeluje prilično slično multi touch sučelju.

JS vatromet

Uživajte u trenutku vatrometa željene gravitacije i brzine, pokretani HTML5 i Javascriptom.

Kaleidoskop

Vrlo lijep i futuristički HTML5 kaleidoskop.

Tekuće čestice

Osjetljiva animacija čestica koja reagira na temelju vašeg kretanja miša.

Očarivač

Još jedan osjetljiv i izvanredan HTML5 demonstracijski prikaz koji pokazuje kako elementi u blizini reagiraju pomicanjem miša.

Oblak maglice

Izgubite se s ovom čudesnom maglicom HTML5.

Paralaksa

Pogledajte sve 2D oblike u paralelnoj perspektivi.

Animacija čestica

Elegantna HTML5 animacija čestica koja se može oblikovati u željenu poruku.

Širenje

Izgubite se s ovom beskrajnom animacijom širenja.

Starfield

Izvrsna HTML5 animacija zvjezdanog polja koja će promijeniti smjer i brzinu na temelju vašeg kretanja miša.

Video uništavanje

Jedan klik za pojačavanje reproduciranog videozapisa.

Waveform

Primijetite kako se val platna HTML5 kreće mijenjajući njegovu amplitudu, valnu duljinu, širinu itd.

Učinak 3D

Impresioniran platnenom animacijom? To više može učiniti HTML5 element platna, a naziva se 3D efekt. Programer se može osloniti na element platna, DOM i JavaScript za stvaranje 3D efekta, koji se kasnije može razviti u 3D animaciju ili igru.

Canvas3D i Flickr

Iskusite potpuno novo 3D iskustvo s Flickr-ovim foto streamom.

Simulacija tkanine

Realistična simulacija platna zasnovana na HTML5.

Čudovište u razvoju

Promatrajte čudovište koje se razvija u komplicirano stvorenje, a jedan od njegovih tvorca je HTML5.

Google poklon kutija

Divovska tražilica Google predstavljena je u 3D prikazu koji se može igrati.

JS dodir

Kvalitetna i realistična vitrina "3D na 2D platnu".

Prezentacija podataka

Iako se HTML5 element platna može koristiti za stvaranje animacije i 3D efekta, također se može implementirati za predstavljanje matematičkih podataka.

gnuplot

Gnuplot, aplikacija za crtanje podataka u HTML5 verziji.

RGraf

RGraph pruža širok spektar prezentacije podataka poput trakasti grafikon, traka napretka i tradicionalni radarski grafikon.

Web aplikacija

U konačnici, koristeći sve mogućnosti kombinirane u HTML5 i drugim jezicima, može se stvoriti interaktivna aplikacija ili igra bliska Flash aplikaciji.

CanvasPaint

Svjedočite kako brat Microsoftova Painta ulazi u vaš web preglednik, a njegov otac je HTML5.

CanvasMol

Znanstvena aplikacija koja je stvorena kako bi vam pomogla da razumijete strukturu određenih elemenata zemlje.

Graditelj crtića

Nacrtajte zanimljivu crtanu sliku pomoću ovog minimalnog i interaktivnog graditelja crtića.

Povucite bilo što ovdje

Povucite sve što možete povući u demonstraciji da biste prikazali detalje.

Gratička skica

Izvorna HTML5 aplikacija koja vam omogućuje izradu nekih osnovnih crteža koji se mogu spremiti u drugačiji format slike, poput jpeg ili png.

PhysicalSketch

Nacrtajte što god želite i pogledajte kako reagiraju simuliranom gravitacijom.

Blok za crtanje

Moćna HTML5 aplikacija za crtanje koja vam omogućuje precizno crtanje i uređivanje slike.

Mali razgovor

Web aplikacija koja potvrđuje zemljopisni položaj poruka povezanih s vremenom preuzetih s Twittera, stvarajući ih tako u 'socijalnu vremensku' mapu temeljenu na platnu, prilično trivijalnu (kako navodi autor), ali zanimljivu.

Igra

3Dosadno

Nikad vam ne bi dosadilo ako nastavite izbjegavati stotine HTML5 metaka u sljedećoj sekundi.

Bijeg

Odskočite loptu da razbijete sve cigle.

Platno

Nije baš igra, ali pokazuje kako se HTML5 može koristiti za razvoj pregledničke igre Pucačina od prvog lica.

Uhvatiti

Koliko lopti možete izbjeći da biste dobili pobjednički HTML5 kvadrat?

Lančana reakcija

Lanac eksplozije za postizanje cilja, nemojte biti ovisni.

cubeout

Igrajte Tetris u 3D, odozgo prema dolje.

etchaFizika

Nacrtajte predmet da premjestite loptu do zvijezde, ne zaboravite na gravitaciju.

Slagalica

Kliknite, zakrenite i ispustite dijelove slagalice da biste riješili ovu slagalicu temeljenu na HTML5.

Slide Puzzle

Kliznite do pobjede, još jedna HTML5 igra koja je stvorena da vam iscijedi sok.

Ista igra

Uklonite određenu grupu kako biste dobili drugu grupu uparenu u istoj boji i na kraju ćete dobiti pobjedu.

Tetris

Jedna od najklasičnijih igara koju je HTML5 oživio.

plodište

Još jedna igra Tetrisa u pseudo-3D verziji.