48 žiaurios HTML5 / CSS3 demonstracinės versijos

drobė animacinių filmų animacija HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

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ą.

„audioburst“ animacijos HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Rutulinis baseinas

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

kamuoliukų baseinas HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

„Blob Sallad“

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

blob sallad HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Bomomo

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

„bomomo HTML5“ demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Naršyklės kamuolys

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

naršyklės kamuolys HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Burbulai

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

burbuliukai HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Drobės animacinių filmų animacija

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

drobė animacinių filmų animacija HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

„Coolclock“

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

„coolclock“ HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

„Flickr PS3“ skaidrių demonstravimas

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

„flickr ps3“ skaidrių demonstracija HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Interaktyvus polaroidas

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

interaktyvus „polaroid HTML5“ demonstravimas: 48 galimos „Flash“ žudymo demonstracijos

JS fejerverkai

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

js fejerverkai HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Kaleidoskopas

Labai gražus ir futuristinis HTML5 kaleidoskopas.

kaleidoskopo HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Skystos dalelės

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

skystos dalelės HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Įtaigiklis

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

hipnotizatoriaus HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Ūko debesis

Pasimesk naudodamas šį nuostabų HTML5 ūką.

miglos debesies HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Parallax

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

paralakso HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Dalelių animacija

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

dalelių animacijos HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Skleisti

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

išplėstinė HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Starfieldas

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

„starfield HTML5“ demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Vaizdo sunaikinimas

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

vaizdo įrašų sunaikinimas HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Bangos forma

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

bangos formos HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

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.

„canvas3d“ ir „flickr“ HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Audinių modeliavimas

Realus, HTML5 pagrįstas audinių modeliavimas.

audinio modeliavimas HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Besivystanti pabaisa

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

besivystantis monstras HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

„Google“ dovanų dėžutė

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

„Google“ dovanų dėžutės HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

JS Touch

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

js palieskite HTML5 demonstraciją: 48 galimos „Flash“ žudymo demonstracijos

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.

„gnuplot“ HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

RGrafas

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

rgraph HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Ž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.

„canvaspaint HTML5“ demonstracija: 48 galimos „Flash“ žudymo demonstracijos

„CanvasMol“

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

„canvasmol HTML5“ demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Karikatūrų kūrėjas

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

animacinių filmų kūrėjo HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Nuvilkite viską čia

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

vilkite bet ką čia HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Gartic eskizas

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

gartic eskizas HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

„PhysicSketch“

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

physicsketch HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Eskizas

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

sketchpad HTML5 vitrina: 48 galimos „Flash“ žudymo demonstracijos

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.

„smalltalk“ HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

žaidimas

3 Nuobodu

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

„3bored HTML5“ demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Ištrūkti

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

išsiveržusi HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

„Canvascape“

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

„canvascape HTML5“ demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Pagauk

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

HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Grandininė reakcija

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

grandininė reakcija HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

„Cubeout“

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

„cubeout“ HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

etchaFizika

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

etchaphysics HTML5 vitrina: 48 galimos „Flash“ žudymo demonstracijos

Dėlionė

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

dėlionės HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Pristatymas

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

skaidrių dėlionė HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

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ė.

tas pats žaidimas HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos

"Tetris"

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

„tetris HTML5“ demonstracija: 48 galimos „Flash“ žudymo demonstracijos

Toras

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

torus HTML5 demonstracija: 48 galimos „Flash“ žudymo demonstracijos


Straipsnio turinys atitinka mūsų principus redakcijos etika. Norėdami pranešti apie klaidą, spustelėkite čia.

7 komentarai, palikite savo

Palikite komentarą

Jūsų elektroninio pašto adresas nebus skelbiamas. Privalomi laukai yra pažymėti *

*

*

  1. Atsakingas už duomenis: Miguel Ángel Gatón
  2. Duomenų paskirtis: kontroliuoti šlamštą, komentarų valdymą.
  3. Įteisinimas: jūsų sutikimas
  4. Duomenų perdavimas: Duomenys nebus perduoti trečiosioms šalims, išskyrus teisinius įsipareigojimus.
  5. Duomenų saugojimas: „Occentus Networks“ (ES) talpinama duomenų bazė
  6. Teisės: bet kuriuo metu galite apriboti, atkurti ir ištrinti savo informaciją.

  1.   Čupatina sakė

    TETRIS NESIEKA, ĮDĖJU DUONES RINKINIUS IR STOVIUOJU, O POILSIS - LABAI ŠALTI CHAVALAI

  2.   Elisa sakė

    Man patinka šis puslapis ... išskyrus pirmąjį žaidimą. Myliu tave, Fran =)
    Iki pasaulio bučinys per daug

  3.   Helsinkas sakė

    Neįtikėtina, įspūdinga. Negaliu patikėti, kaip toli pasiekta interneto svetainių kūrimas!

  4.   Džo vega sakė

    Aš nežinau, kodėl šie ištekliai priskiriami HTML5, tai yra grynas „Javascript“, prieš „Flash“ atsiradimą, naudodamas „Javascript“, jūs galėjote atlikti visus šiuos dalykus. Barselonoje buvo atliktas tyrimas, kuris padarė kai kurias svetaines, kurios tuo metu sukrėtė mano mintis, viskas javascript'e tiek, kad išmokau iš jų ir suprojektavau porą su atšokusiais kamuoliukais ir viskas, aš jų visiškai pametiau ir vis dar gailiuosi. Nepamenu studijos pavadinimo. Tai buvo kažkas panašaus į jus2 ar 2jūsą, kuris buvo maždaug 2-aisiais.

  5.   ASDF sakė

    Joe Vega ... ... tai rodo, kad jūs neturite jokios supratimo apie HTML5 ... lol

  6.   Džo vega sakė

    Galbūt neturite jokios kruvinos HTML5 idėjos, tiesa, bet jūs painiojate gaidį su vištienos namu ir neskiriate kalbos nuo aplinkos. Aš raginu jus pateikti pavyzdį, panašų į čia pateiktus, nenaudojant „Javascript“, tik naudojant HTML5, ir jūs suprasite, ką norėjau pasakyti įraše, kurį ištryniau. Be to, aš žvelgiau į pavyzdžių šaltinio kodą ir yra keli, kuriuos galima lengvai padaryti, netaikant jo html5.
    Tas html5 teikia daug patobulinimų ir daug ką palengvinančių dalykų, tiesa, tačiau šiame puslapyje rodomo fantastiško dalyko laurai yra „Javascript“.

  7.   Santiago Barchetta sakė

    Man įdomu rengti tokio tipo pristatymus ... ar turite pamoką ar puslapį su ištekliais ??? Ačiū!!!