48 jõhkrat HTML5 / CSS3 demot

lõuend koomiks animatsioon HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Ma võtan selle postituse, et vastata küsimusele, mille esitasite hiljuti artikli kommentaarides:

Millal on hea aeg hakata HTML5-ga täielikult kujundama?

Noh, ausalt, see sõltub sihtmärgist, mida sihite. Kui te ei kavatse oma külastajatel kasutada Internet Explorerit (nt: Maci tarkvaraleht), alustage kohe HTML5-ga, kuid kui vajate oma veebisaidi nägemiseks IE-ga inimesi, siis parem oodake ...

Kirje peal, hästi pärast hüpet, on HTML48-st 5 demot, mis on hämmastavad ja väärivad vaatamist. Suur on vähe.

Allikas | HongKiat

audioburst Animatsioon

HTML5 lõuendi ja helimärgiga loodud mugav ja fantastiline animatsioon.

audiopurske animatsiooni HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Pallibassein

Viimasel Google'i sisend- / väljundsündmusel esitletud demo näitab, kui dünaamiline saab HTML5 olla.

pallibasseini HTML5 esitlus: 48 potentsiaalset välkkiire tapmise demot

Kämp Sallad

HTML5-i abil loodud olend, mis teile meeldiks.

blob sallad HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

bomomo

Bomomo abil saate jälgida HTML5-ga simuleeritud erinevaid aatomi liikumisi.

bomomo HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Brauseri pall

Imestage selle „brauseritevahelise” HTML5-palli üle.

brauseri palli HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Bubbles

Lõbutsege, luues lõputult erineva värviga ujuvaid mulli.

mullid HTML5 esitlus: 48 potentsiaalset välkmõrva demot

Lõuendi koomiks animatsioon

Lihtne ja naljakas HTML5 koomiks, mis aitab teil mõista, mida HTML5 lõuendi element suudab.

lõuend koomiks animatsioon HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Lahe kell

HTML5 ja JavaScripti ehitatud kena kohandatav analoogkell.

coolclock HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Flickr PS3 slaidiseanss

Vaadake oma brauseris oma Flickri fotosid PS3 stiilis slaidiseansiga.

flickr ps3 slaidiseanss HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Interaktiivne polaroid

Interaktiivne demo, mis töötab üsna sarnaselt multi-touch liidesega.

interaktiivne polaroid HTML5 esitlus: 48 potentsiaalset välkkiire tapmise demot

JS ilutulestik

Nautige ilutulestiku hetke oma eelistatud raskuse ja kiirusega, toetudes HTML5-st ja Javascriptist.

js ilutulestik HTML5 esitlus: 48 potentsiaalset välklambi tapmise demot

Kaleidoskoop

Väga ilus ja futuristlik HTML5 kaleidoskoop.

kaleidoskoop HTML5 vitriin: 48 potentsiaalset välklambi tapmise demot

Vedelad osakesed

Tundlik osakeste animatsioon, mis reageerib teie hiire liikumise põhjal.

vedelad osakesed HTML5 esitlus: 48 potentsiaalset välklambi tapmise demot

Mesmeriseerija

Teine tundlik ja silmapaistev HTML5-demo, mis näitab, kuidas lähedal asuvad elemendid teie hiire liikumisega reageerivad.

mesmerizer HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Udupilv

Eksige selle imelise HTML5 udukoguga.

udupilv HTML5 esitlus: 48 potentsiaalset välkmõrva demot

Parallaks

Vaadake kõiki 2D kujundeid paralleelselt.

parallaksi HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Osakeste animatsioon

Elegantne HTML5-osakeste animatsioon, mis võib moodustada teie eelistatud sõnumi.

osakeste animatsioon HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Levima

Eksige selle lõputu levitatava animatsiooni abil.

HTML5-i levitamine: 48 Flash-tapmise potentsiaalset demot

Starfield

Väga lahe HTML5-tärnivälja animatsioon, mis muudaks suuna ja kiirust vastavalt hiire liikumisele.

starfield HTML5 esitlus: 48 potentsiaalset välklambi tapmist

Video hävitamine

Esitatava video buumimiseks üks klõps.

video hävitamine HTML5 esitlus: 48 Flash-tapmise potentsiaalset demot

Lainekuju

Pange tähele, kuidas HTML5 lõuendi laine liigub, muutes selle amplituudi, lainepikkust, laiust jne.

lainekuju HTML5 esitlus: 48 potentsiaalset välkmõrva demot

3D efekt

Muljet lõuendi animatsioon? See on rohkem HTML5 lõuendi element, mida saab teha, ja seda nimetatakse 3D-efektiks. Arendaja saab 3D-efekti loomisel toetuda lõuendi elemendile, DOM-ile ja JavaScripti, millest saab hiljem arendada 3D-animatsiooni või mängu.

Canvas3D ja Flickr

Saate Flickri fotovoogu täiesti uue 3D-kogemuse.

canvas3d ja flickr HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Riide simulatsioon

Realistlik HTML5-põhine riidest simulatsioon.

riidest simulatsioon HTML5 esitlus: 48 potentsiaalset välklambi tapmist

Arenev koletis

Vaadake, kuidas koletis areneb keerukaks olendiks, selle üheks loojaks on HTML5.

arenev koletis HTML5 esitlus: 48 potentsiaalset välklambi tapmise demot

Google'i kinkekarp

Hiiglaslik otsingumootor Google esitatakse 3D-vormingus mängitavas vaates.

google giftbox HTML5 Showcase: 48 potentsiaalset Flash-tapmise demot

JS Touch

Kvaliteetne ja realistlik "3D 2D lõuendil" vitriin.

js puudutage HTML5 esitlust: 48 potentsiaalset Flash-tapmise demot

Andmete esitamine

Kuigi HTML5 lõuendi elementi saab kasutada animatsiooni ja 3D-efekti loomiseks, saab seda rakendada ka matemaatiliste andmete esitamiseks.

gnuplot

Gnuplot, andmete joonestamise rakendus HTML5 versioonis.

gnuplot HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

RGraph

RGraph pakub laia valikut andmeesitlusi, näiteks tulpdiagrammi, edenemisriba ja traditsioonilist radarikaarti.

rgraph HTML5 esitlus: 48 Flash-tapmise potentsiaalset demot

Veebirakendus

Lõppkokkuvõttes saab kõiki HTML5 ja muu keelega kombineeritud võimalusi kasutades luua interaktiivse rakenduse või mängu, mis on Flash-rakenduse lähedal.

CanvasPaint

Tunnistaja, et Microsoft Paint'i vend tuleb teie veebibrauserisse ja tema isa on HTML5.

canvaspaint HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

CanvasMol

Teaduslik rakendus, mis on loodud selleks, et aidata teil mõista teatud maaelemendi struktuuri.

canvasmol HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Multikate ehitaja

Selle minimaalse ja interaktiivse koomiksiehitaja abil saate joonistada huvitavat koomiksit.

koomiksiehitaja HTML5 esitlus: 48 potentsiaalset välkmõrva demot

Lohistage kõik siia

Üksikasjade kuvamiseks lohistage kõik, mida saate demos lohistada.

lohistage kõik siia HTML5 esitlus: 48 potentsiaalset välklambi tapmise demot

Gartici visand

Algne HTML5-rakendus, mis võimaldab teil teha mõned põhijoonised, mida saab salvestada erinevasse pildivormingusse, näiteks jpeg või png.

gartic sketch HTML5 Showcase: 48 Flash-tapmise potentsiaalset demot

PhysicSketch

Joonista kõik, mis sulle meeldib, ja vaata, kuidas nad simuleeritud gravitatsiooniga reageerivad.

physicsketch HTML5 esitlus: 48 Flash-tapmise potentsiaalset demot

visandiplokk

Võimas HTML5 joonistusrakendus, mis võimaldab teil oma pilti täpselt joonistada ja redigeerida.

sketchpad HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Väike jutt

Veebirakendus, mis kinnitab Twitterist saadud ilmastikuga seotud sõnumite geograafilist asukohta, moodustades need lõuendipõhiseks "sotsiaalse ilma" kaardiks, mis on üsna tühine (nagu autor väitis), kuid huvitav.

smalltalk HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Mäng

3 Igav

Teil ei oleks kunagi igav, kui suudate järgmise sekundi jooksul pidevalt sadadest HTML5-kuulidest kõrvale hiilida.

3-igav HTML5-esitlus: 48 potentsiaalset Flash-tapmise demot

Breakout

Kõigi telliste purustamiseks põrutage pall tagasi.

läbimurre HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Canvascape

Mitte päris mäng, kuid see näitab, kuidas HTML5-d saab kasutada brauserimängu First Person Shooting arendamiseks.

canvascape HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Püüdke seda

Mitu palli saate vältida, et saada oma võitnud HTML5 ruut?

HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Ahelreaktsioon

Aheldage plahvatus eesmärgi saavutamiseks, ärge sattuge sõltuvusse.

ahelreaktsioon HTML5 esitlus: 48 potentsiaalset välkkiire tapmise demot

Kuubik

Mängige Tetrist ülalt-alla 3D-vaates.

cubeout HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

etchaFüüsika

Kuuli liigutamiseks tähe poole tõmmake joonistust, ärge unustage raskust.

etchaphysics HTML5 Showcase: 48 potentsiaalset välkkiire tapmise demot

Jigsaw Puzzle

Selle HTML5-põhise mosaiikpildi lahendamiseks klõpsake, pöörake ja visake puzzle tükke.

mosaiikpildi HTML5 esitlus: 48 potentsiaalset välkkiire tapmise demot

Slide Puzzle

Libistage võidule - see on veel üks HTML5-mäng, mis on loodud teie meele mahla pressimiseks.

slide puzzle HTML5 Showcase: 48 potentsiaalset välklambi tapmise demot

Sama mäng

Eemaldage teatud rühm, et saada teine ​​sama värvi rühm ja lõpuks saate võidu.

sama mängu HTML5 esitlus: 48 Flash-tapmise potentsiaalset demot

Tetris

Üks klassikalisemaid mänge, mille HTML5 taas ellu äratas.

tetris HTML5 esitlus: 48 potentsiaalset Flash-tapmise demot

Torus

Veel üks Tetrise mäng pseudo-3D versioonis.

torus HTML5 esitlus: 48 Flash-tapmise potentsiaalset demot


Artikli sisu järgib meie põhimõtteid toimetuse eetika. Veast teatamiseks klõpsake nuppu siin.

7 kommentaari, jätke oma

Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata.

*

*

  1. Andmete eest vastutab: Miguel Ángel Gatón
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.

  1.   pulgakomm DIJO

    TETRIS EI lähe, panin kaks tükki sisse ja seisan, aga ülejäänud on väga jahedad kaviivid

  2.   Elisa DIJO

    Mulle meeldib see leht ... välja arvatud esimene mäng. Ma armastan sind Fran =)
    Hüva suudlus maailmale ka

  3.   Helsingi DIJO

    Uskumatu, suurejooneline. Ma ei suuda uskuda, kui kaugele on veebiarendus jõudnud!

  4.   Joe vega DIJO

    Ma ei tea, miks neid ressursse HTML5-le omistatakse, see on puhas Javascript, enne Flashi tõusu koos Javascriptiga sai kõiki neid asju teha, Barcelonas tehti uuring, mis tegi mõned saidid, mis sel ajal mu pea puhusid, kõike javascriptis nii palju, et õppisin neilt ja kujundasin paar põrgatavate pallidega ja kõik, ma kaotasin need täielikult ja kahetsen seda siiani. Ma ei mäleta stuudio nime, see oli midagi sellist nagu sina2 või sina2, mis oli umbes 2. aastal.

  5.   ASDF DIJO

    Joe Vega ... ... see näitab, et sul pole HTML5-st kuradi aimu ... lol

  6.   Joe vega DIJO

    Võib-olla pole teil ühtegi verist html5 ideed, see on tõsi, kuid ajate kuke segi kanakuudiga ega erista keelt keskkonnast. Ma kutsun teid üles tegema siin näiteks näiteks Javascripti kasutamata näide ainult HTML5-ga ja saate aru, mida ma kustutatud postituses mõtlesin. Veelgi enam, olen vaadanud näidete lähtekoodi ja on mitmeid, mida saab hõlpsasti teha, ilma et peaksite seda HTML5-le installima.
    See HTML5 toob palju parandusi ja palju hõlbustavaid asju, on tõsi, kuid sellel lehel kuvatud fantastilise asja loorberid on Javascript.

  7.   Santiago Barchetta DIJO

    Olen huvitatud seda tüüpi esitluste tegemisest ... kas teil on õpetus või ressurssidega leht ??? Aitäh!!!