48 brutalnih demonstracija HTML5 / CSS3

Ovim postom odgovaram na 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 vaši posjetitelji koriste Internet Explorer (npr. Mac stranicu softvera), krenite odmah s HTML5, ali ako vam trebaju ljudi s IE da vide vašu web stranicu, radije pričekajte ...

Na početku, dobro nakon skoka, 48 demonstracija HTML5-a koje su nevjerovatne i zaslužuju da ih se vidi. Super je malo.

Izvor | HongKiat

audioburst Animacija

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

ball pool

Pokazan na posljednjem Google I / O događaju, ovaj demo 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.

Browser Ball

Iznenadite se ovom HTML5 lopticom 'unakrsnog preglednika'.

Bubbles

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

Platno Cartoon Animacija

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

coolclock

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

Flickr PS3 prezentacija

Pregledajte fotografije svog Flickr-a pomoću prezentacije u PS3 stilu u web pregledaču.

Interaktivni polaroid

Interaktivni demo koji radi prilično slično multi touch interfejsu.

JS Vatromet

Uživajte u trenutku vatrometa željene gravitacije i brzine, a pokreću ga HTML5 i Javascript.

kaleidoskop

Vrlo lijep i futuristički HTML5 kaleidoskop.

Tečne čestice

Osetljiva animacija čestica koja reaguje na osnovu vašeg kretanja miša.

mesmerizer

Još jedan osjetljiv i izvanredan HTML5 demo koji pokazuje kako elementi u blizini reagiraju pokretom miša.

Maglina oblak

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 vašu željenu poruku.

širenje

Izgubite se s ovom beskrajnom animacijom širenja.

Starfield

Izvrsna HTML5 animacija zvjezdanog polja koja bi promijenila smjer i brzinu na osnovu vašeg kretanja miša.

uništavanje videa

Jedan klik za pojačavanje reproduciranog videozapisa.

Talasni oblik

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

3D efekat

Impresioniran platnenom animacijom? To je više što HTML5 element platna može učiniti, a zove 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

Realna simulacija platna zasnovana na HTML5.

Evoluirajuće čudovište

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

Google poklon kutija

Divovski pretraživač Google predstavljen je u 3D prikazu koji se može igrati.

J.S. Touch

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đe se može implementirati za predstavljanje matematičkih podataka.

gnuplot

Gnuplot, aplikacija za crtanje podataka u HTML5 verziji.

RGraph

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 HTML5 i drugim jezikom, može se stvoriti interaktivna aplikacija ili igra bliska Flash aplikaciji.

CanvasPaint

Svjedok je kako brat Microsoft Painta ulazi u vaš web preglednik, a njegov otac je HTML5.

CanvasMol

Naučna aplikacija koja je stvorena da vam pomogne da razumijete strukturu određenih elemenata zemlje.

Crtani graditelj

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

Povucite bilo što ovdje

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

Gratička skica

Originalna HTML5 aplikacija koja vam omogućava da napravite neke osnovne crteže 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 skice

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

Mali razgovor

Web aplikacija koja potvrđuje geografski položaj poruka povezanih s vremenom koje su preuzete s Twittera, čineći ih tako 'društvenom vremenskom' mapom zasnovanom na platnu, prilično trivijalnoj (kako navodi autor), ali zanimljivoj.

igra

3Dosadno

Nikad vam ne bi dosadilo ako u narednoj sekundi nastavite izbjegavati stotine HTML5 metaka.

bijeg

Odbijte loptu da razbijete sve cigle.

canvasscape

Nije baš igra, ali pokazuje kako se HTML5 može koristiti za razvoj pretraživačke igre First Person Shooting.

Uhvati to

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

Reprodukujte Tetris u 3D, odozgo prema dolje.

etchaPhysics

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

Slagalica

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

Slide slagalica

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.

torus

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