48 brutāli HTML5 / CSS3 demonstrējumi

Es izmantoju šo ziņu, lai atbildētu uz jautājumu, kuru nesen uzdeva raksta komentāros:

Kad ir piemērots laiks sākt pilnīgu dizainu ar HTML5?

Nu, godīgi sakot, tas ir atkarīgs no mērķa, uz kuru mērķējat. Ja jūs neplānojat apmeklētājiem izmantot Internet Explorer (piemēram, Mac programmatūras lapu), sāciet uzreiz ar HTML5, bet, ja jums ir nepieciešami cilvēki ar IE, lai redzētu jūsu vietni, labāk pagaidiet ...

Pēc ieraksta, labi pēc lēciena, 48 HTML5 demonstrācijas, kas ir pārsteidzošas un ir pelnījušas, lai tās tiktu apskatītas. Lieliski ir maz.

Avots | HongKiat

audioburst Animācija

Ērta un fantastiska animācija, kas izveidota ar HTML5 audeklu un audio tagu.

Bumbu baseins

Šī demonstrācija, kas tiek demonstrēta pēdējā Google I / O notikumā, parāda, cik dinamiska var būt HTML5.

Lāse Sallad

HTML5 radīta būtne, kas jūs iepriecinātu.

bomomo

Izmantojot Bomomo, jūs varat novērot dažādas atomu kustības, kas simulētas ar HTML5.

Pārlūka bumba

Izbrīnieties ar šo “pārlūkprogrammu” HTML5 bumbu.

Burbuļi

Izklaidējieties, izveidojot nebeidzamus peldošus burbuļus ar dažādu krāsu.

Audekls Karikatūra Animācija

Vienkārša un smieklīga HTML5 karikatūra, kas palīdz saprast, ko HTML5 audekla elements spēj.

Foršs pulkstenis

Jauks, pielāgojams analogais pulkstenis, ko izveidojis HTML5 un JavaScript.

Flickr PS3 slaidrāde

Skatiet savus Flickr fotoattēlus ar PS3 stila slaidrādi tīmekļa pārlūkprogrammā.

Interaktīvs polaroīds

Interaktīva demonstrācija, kas darbojas diezgan līdzīgi multi touch interfeisam.

JS uguņošana

Izbaudiet uguņošanas mirkli ar vēlamo smagumu un ātrumu, ko nodrošina HTML5 un Javascript.

Kaleidoskops

Ļoti jauks un futūristisks HTML5 kaleidoskops.

Šķidrās daļiņas

Sensitīva daļiņu animācija, kas reaģē, pamatojoties uz peles kustību.

hipnotizētājs

Vēl viena sensitīva un izcila HTML5 demonstrācija, kas parāda, kā tuvumā esošie elementi reaģē ar peles kustību.

Miglāja mākonis

Pazust ar šo brīnišķīgo HTML5 miglāju.

Paralakse

Skatiet visas 2D formas paralēli.

Daļiņu animācija

Eleganta HTML5 daļiņu animācija, kas var veidoties jūsu vēlamajā ziņojumā.

Izplatīties

Pazust ar šo bezgalīgo izplatīto animāciju.

Starfīlda

Ļoti forša HTML5 zvaigznītes lauka animācija, kas mainītu virzienu un ātrumu, pamatojoties uz peles kustību.

Video iznīcināšana

Viens klikšķis, lai uzplauktu atskaņojamo videoklipu.

Viļņu forma

Ievērojiet, kā pārvietojas HTML5 audekla vilnis, mainot tā amplitūdu, viļņa garumu, platumu utt.

3D efekts

Iespaidoja audekla animācija? Tas vairāk var paveikt HTML5 audekla elementu, un to sauc par 3D efektu. Izstrādātājs var paļauties uz audekla elementu, DOM un JavaScript, lai izveidotu 3D efektu, ko vēlāk var pārveidot par 3D animāciju vai spēli.

Canvas3D un Flickr

Izmantojiet pilnīgi jaunu 3D pieredzi ar Flickr fotostrāmu.

Auduma simulācija

Reālistiska, uz HTML5 balstīta auduma simulācija.

Attīstošais monstrs

Novērojiet briesmoni, kas pārvēršas par sarežģītu radību, viens no tā radītājiem ir HTML5.

Google dāvanu kaste

Milzīga meklētājprogramma Google tiek parādīta 3D atskaņojamā skatā.

JS pieskarieties

Augstas kvalitātes un reālistiska vitrīna “3D uz 2D audekla”.

Datu prezentācija

Lai gan HTML5 audekla elementu var izmantot, lai izveidotu animāciju un 3D efektus, to var arī ieviest, lai parādītu matemātiskus datus.

gnuplot

Gnuplot, datu noformēšanas lietojumprogramma HTML5 versijā.

RGraph

RGraph nodrošina plašu datu prezentācijas klāstu, piemēram, joslu diagrammu, progresa joslu un tradicionālo radaru diagrammu.

Web lietojumprogramma

Galu galā, izmantojot visas HTML5 un citu valodu kombinētās iespējas, var izveidot interaktīvu lietojumprogrammu vai spēli, kas ir tuvu Flash lietojumprogrammai.

CanvasPaint

Liecinieks ir Microsoft Paint brālis, kurš ienāk jūsu tīmekļa pārlūkprogrammā, un viņa tēvs ir HTML5.

CanvasMol

Zinātniska lietojumprogramma, kas izveidota, lai palīdzētu jums izprast noteiktu zemes elementu struktūru.

Karikatūru veidotājs

Izmantojot šo minimālo un interaktīvo karikatūru veidotāju, uzzīmējiet interesantu karikatūras attēlu.

Velciet visu šeit

Velciet visu, ko varat vilkt demonstrācijā, lai parādītu informāciju.

Gartic skice

Oriģināla HTML5 lietojumprogramma, kas ļauj jums izveidot dažus pamata zīmējumus, kurus var saglabāt dažādos attēla formātos, piemēram, jpeg vai png.

Fiziskā skice

Uzzīmējiet visu, kas jums patīk, un uzziniet, kā viņi reaģē ar simulētu gravitāciju.

Sketchpad

Spēcīga HTML5 zīmēšanas programma, kas ļauj precīzi zīmēt un rediģēt attēlu.

Maza saruna

Tīmekļa lietojumprogramma, kas apstiprina ar Twitter saistītu ar laiku saistītu ziņojumu ģeogrāfisko atrašanās vietu, tādējādi veidojot tos uz audekla balstītu “sociālo laika” karti, kas ir diezgan niecīga (kā autors norādīja), bet interesants.

Spēle

3 Garlaicīgi

Jums nekad nebūtu garlaicīgi, ja nākamajā sekundē varētu turpināt izvairīties no simtiem HTML5 aizzīmju.

Breakout

Atsitiet bumbu, lai salauztu visus ķieģeļus.

audekla ainava

Nav gluži spēle, bet tas parāda, kā HTML5 var izmantot, lai izstrādātu pirmās personas šaušanas pārlūka spēli.

Noķert to

Cik bumbiņu jūs varat izvairīties, lai iegūtu savu uzvarošo HTML5 kvadrātu?

Ķēdes reakcija

Ķēdējiet sprādzienu, lai sasniegtu mērķi, neuztraucieties.

kubs

Spēlējiet Tetris 3D skatā no augšas uz leju.

etchaFizika

Zīmējiet priekšmetu, lai pārvietotu bumbu uz zvaigzni, neaizmirstiet par smagumu.

Jigsaw puzzle

Noklikšķiniet, pagrieziet un nometiet mīklu gabalus, lai atrisinātu šo mozaīkas, kuras pamatā ir HTML5.

Slaidu puzzle

Slaids līdz uzvarai - vēl viena HTML5 spēle, kas izveidota, lai izspiestu jūsu prāta sulu.

Tā pati spēle

Noņemiet noteiktu grupu, lai iegūtu citu grupu vienā un tajā pašā krāsā, un galu galā jums tiks piešķirta uzvara.

Tetris

Viena no klasiskākajām spēlēm, ko HTML5 atdzīvināja.

Torus

Vēl viena Tetris spēle pseido-3D versijā.