48 žiaurios HTML5 / CSS3 demonstracinės versijos

Aš užėmiau šį pranešimą norėdamas išspręsti klausimą, kurį neseniai uždavėte straipsnio komentaruose:

Kada tinkamas laikas pradėti kurti pilną HTML5 kūrimą?

Na, nuoširdžiai, tai priklauso nuo taikinio, į kurį taikote. Jei neplanuojate lankytojams naudotis „Internet Explorer“ (pvz., „Mac“ programinės įrangos puslapiu), tada dabar pradėkite nuo HTML5, bet jei jums reikia žmonių, turinčių IE, norėdami pamatyti jūsų svetainę, geriau palaukite ...

Įraše, gerokai po šuolio, 48 HTML5 demonstracinės versijos, kurios yra nuostabios ir kurias verta pamatyti. Puiku yra mažai.

Šaltinis | „HongKiat“

audioburst animacija

Patogi ir fantastiška animacija, sukurta naudojant HTML5 drobę ir garso žymą.

Rutulinis baseinas

Šis demonstracinis pranešimas, parodytas paskutiniame „Google I / O“ įvykyje, parodo, koks dinamiškas gali būti HTML5.

„Blob Sallad“

HTML5 sukurta būtybė, kuri jus džiugintų.

bomomo

Naudodami „Bomomo“ galite stebėti skirtingus atominius judesius, imituojamus HTML5.

Naršyklės kamuolys

Nustebkite šiuo „kryžminio naršyklės“ HTML5 kamuoliuku.

Burbulai

Linksminkitės kurdami begales skirtingų spalvų burbuliukų.

Drobės animacinių filmų animacija

Paprastas ir juokingas HTML5 animacinis filmas, kuris padeda suprasti, ką gali HTML5 drobės elementas.

„Coolclock“

Gražus, pritaikomas analoginis laikrodis, sukurtas HTML5 ir „JavaScript“.

„Flickr PS3“ skaidrių demonstravimas

Peržiūrėkite „Flickr“ nuotraukas naudodami PS3 stiliaus skaidrių peržiūrą žiniatinklio naršyklėje.

Interaktyvus polaroidas

Interaktyvi demonstracinė versija, veikianti gana panašiai kaip „multi touch“ sąsaja.

JS fejerverkai

Mėgaukitės fejerverkų akimirka naudodamiesi norimu sunkumu ir greičiu, kurį teikia HTML5 ir „Javascript“.

Kaleidoskopas

Labai gražus ir futuristinis HTML5 kaleidoskopas.

Skystos dalelės

Jautri dalelių animacija, reaguojanti pagal pelės judesį.

Įtaigiklis

Dar viena jautri ir išskirtinė HTML5 demonstracinė versija, rodanti, kaip netoliese esantys elementai reaguoja į jūsų pelės judėjimą.

Ūko debesis

Pasimesk naudodamas šį nuostabų HTML5 ūką.

Parallax

Peržiūrėkite visas 2D formas lygiagrečiai.

Dalelių animacija

Elegantiška HTML5 dalelių animacija, kurią galima suformuoti į jūsų pageidaujamą pranešimą.

Skleisti

Pasiklyskite naudodami šią nesibaigiančią skleidžiamą animaciją.

Starfieldas

Labai šauni HTML5 žvaigždžių lauko animacija, kuri, atsižvelgiant į pelės judėjimą, pakeistų kryptį ir greitį.

Vaizdo sunaikinimas

Vienas spragtelėjimas, kad padidintumėte rodomą vaizdo įrašą.

Bangos forma

Atkreipkite dėmesį, kaip juda HTML5 drobės banga, keisdama jos amplitudę, bangos ilgį, plotį ir kt.

3D efektas

Sužavėjo drobės animacija? Tai daugiau HTML5 drobės elementas gali padaryti, ir jis vadinamas 3D efektu. Kūrėjas gali pasikliauti drobės elementu, DOM ir „JavaScript“ kurdamas 3D efektą, kuris vėliau gali būti išplėtotas į 3D animaciją ar žaidimą.

„Canvas3D“ ir „Flickr“

Turėkite visiškai naują 3D patirtį naudodamiesi „Flickr“ nuotraukų srautu.

Audinių modeliavimas

Realus, HTML5 pagrįstas audinių modeliavimas.

Besivystanti pabaisa

Stebėkite pabaisą, kuri virsta sudėtinga būtybe, viena iš jos kūrėjų yra HTML5.

„Google“ dovanų dėžutė

Milžiniškas paieškos variklis „Google“ pateikiamas 3D, žaidžiamu vaizdu.

J.S. Palieskite

Aukštos kokybės ir tikroviška „3D ant 2D drobės“ vitrina.

Duomenų pateikimas

Nors HTML5 drobės elementas gali būti naudojamas kuriant animaciją ir 3D efektą, jis taip pat gali būti įgyvendinamas pateikiant matematinius duomenis.

„Gnuplot“

„Gnuplot“, duomenų braižymo programa HTML5 versijoje.

RGrafas

„RGraph“ teikia platų duomenų pateikimo spektrą, pvz., Juostinę diagramą, eigos juostą ir tradicinę radaro diagramą.

Žiniatinklio programa

Galiausiai, naudojant visas HTML5 ir kitų langauge sujungtų galimybių galimybes, galima sukurti interaktyvią programą ar žaidimą, kuris yra artimas „Flash“ programai.

„CanvasPaint“

Liudytojas, „Microsoft Paint“ brolis ateina į jūsų interneto naršyklę, o jo tėvas yra HTML5.

„CanvasMol“

Mokslinė programa, sukurta padėti jums suprasti tam tikrą žemės elemento struktūrą.

Karikatūrų kūrėjas

Su šiuo minimaliu ir interaktyviu animacinių filmų kūrėju nupieškite įdomų animacinių filmų vaizdą.

Nuvilkite viską čia

Norėdami parodyti išsamią informaciją, vilkite viską, ką galite vilkti demonstracinėje versijoje.

Gartic eskizas

Originali HTML5 programa, leidžianti padaryti keletą pagrindinių piešinių, kuriuos galima įrašyti į skirtingą vaizdo formatą, pvz., Jpeg ar png.

„PhysicSketch“

Nupieškite, kas jums patinka, ir pažiūrėkite, kaip jie reaguoja imituojant gravitaciją.

Eskizas

Galinga HTML5 piešimo programa, leidžianti tiksliai piešti ir redaguoti vaizdą.

Mažas pokalbis

Interneto programa, patvirtinanti geografinę su oru susijusios žinutės, gautos iš „Twitter“, padėtį, tokiu būdu suformuojant jas į drobės pagrindu sukurtą „socialinių orų“ žemėlapį, kuris yra gana trivialus (kaip teigė autorius), bet įdomus.

žaidimas

3 Nuobodu

Jums niekada nebus nuobodu, jei per kitą sekundę galėsite nuolat išvengti šimtų HTML5 ženklelių.

Ištrūkti

Atmeskite kamuolį, kad sulaužytumėte visas plytas.

„Canvascape“

Ne visai žaidimas, bet jis parodo, kaip HTML5 galima naudoti kuriant „First Person Shooting“ naršyklės žaidimą.

Pagauk

Kiek kamuolių galite išsisukti, kad gautumėte laimėtą HTML5 kvadratą?

Grandininė reakcija

Grandinė sprogimą, kad pasiektumėte tikslą, nenusiminkite.

„Cubeout“

Leiskite „Tetris“ 3D vaizdu iš viršaus į apačią.

etchaFizika

Nubrėžkite daiktą, norėdami perkelti kamuolį į žvaigždę, nepamirškite apie sunkumą.

Dėlionė

Spustelėkite, pasukite ir nuleiskite dėlionės dalis, kad išspręstumėte šį HTML5 pagrįstą dėlionę.

Pristatymas

Skaidrus į pergalę - dar vienas HTML5 žaidimas, sukurtas norint išspausti jūsų mintis.

Tas pats žaidimas

Pašalinkite tam tikrą grupę, kad kita grupė būtų suporuota ta pačia spalva ir galų gale jums būtų suteikta pergalė.

"Tetris"

Vienas iš klasikinių žaidimų, kurį HTML5 grąžino į gyvenimą.

Toras

Dar vienas „Tetris“ žaidimas pseudo-3D versijoje.