HTML5-verkkosivuston esittely 48 Mahdolliset Flash-tappamisen demot

Joten olet kuullut kaikki huhut HTML5: stä ottaisivat Adobe Flashin. Vaikka useimmat web-yhteisöt väittävät, että se on mahdollista tai ei, sinun täytyy vaeltaa mitä tekee HTML5: stä niin voimakkaan, että jopa jättiläinen yritys Apple haluaa käyttää sitä korvaamaan Flashin.

Siksi tämä viesti on olemassa, emme aio puhua siitä, mitä HTML5 voi tehdä, mutta näytä eläviä demoja maagisista asioista, joita HTML5 voi saavuttaa muulla kielellä, kuten JavaScriptillä, joten valmistaudu innoittamaan.

Huomautus: Koska tiettyjä web-selaimia, kuten Internet Exploreria, ei tueta täysin HTML5: ää, suosittelemme, että käytät Firefox-selainta, jos haluat nähdä kaikki HTML5-demot alla.

animaatio

HTML5: n kangaselementti on ratkaiseva tekijä HTML5: n korvaamiseksi tietyille Flash-animaatioille. Sen avulla voit rakentaa dynaamista, skriptattavaa 2D-muotojen ja bittikarttakuvien tekemistä Javascriptillä, joka on muuten hallittavissa oleva animaatio.

Audioburst-animaatio

Mukava ja fantastinen animaatio, joka on luotu HTML5: n kankaalla ja äänitunnisteella.

Pallo allas

Tämä demo näyttää viimeisimmässä Google I / O-tapahtumassa, kuinka dynaaminen voi HTML5: n olla.

Blob Sallad

HTML5-spawned-olento, joka miellyttää sinua.

Bomomo

Bomomolla voit tarkkailla HTML5: llä simuloitua erilaista atomiliikettä.

Selaimen pallo

Hämmästytä tätä "rajat selaimen" HTML5-palloa.

Kuplia

Pidä hauskaa luomalla loputtomia kelluvia kuplia eri väreillä.

Canvas Cartoon Animation

Yksinkertainen ja hauska HTML5-sarjakuva, joka auttaa sinua ymmärtämään, mitä HTML5: n kangaselementti voi tehdä.

Coolclock

Mukava, muokattavissa oleva HTML5- ja JavaScript-analoginen kello.

Flickr PS3 Diaesitys

Tarkastele Flickrin valokuvia PS3-tyylisillä diaesityksillä web-selaimessa.

Interaktiivinen Polaroid

Interaktiivinen demo, joka toimii melko samanlaisella tavalla kuin moniliitäntäliittymä.

JS Ilotulitus

Nauti ilotulitushetkestä haluamallasi painovoimalla ja nopeudella, HTML5: n ja Javascriptin avulla.

kaleidoskooppi

Hyvin kaunis ja futuristinen HTML5-kaleidoskooppi.

Nestemäiset hiukkaset

Herkkä hiukkasten animaatio, joka reagoi hiiren liikkeen perusteella.

Mesmerizer

Toinen herkkä ja erinomainen HTML5-demo, joka osoittaa, miten lähellä olevat elementit reagoivat hiiren liikkeen kanssa.

Nebula Cloud

Hävi tämä ihmeellinen HTML5-nebula.

Parallaksi

Näytä kaikki 2D-muodot rinnakkain.

Hiukkasten animaatio

Elegantti HTML5-hiukkasten animaatio, joka voi muodostaa haluamasi viestin.

Levitä

Hävitä tämä loputon leviävä animaatio.

tähtikenttä

Erittäin viileä HTML5-tähtikentän animaatio, joka muuttaisi suunnan ja nopeuden hiiren liikkeen perusteella.

Videon tuhoaminen

Yhdellä napsautuksella voit toistaa videon.

aaltomuoto

Huomioi, miten HTML5: n kangasaalto liikkuu muuttamalla sen amplitudia, aallonpituutta, leveyttä jne.

3D-vaikutus

Canvas-animaation vaikutuksesta? Tämä on enemmän HTML5: n kangaselementti, jota kutsutaan 3D-efektiksi. Kehittäjä voi luottaa kangaselementtiin, DOM: iin ja JavaScriptiin luoda 3D-efekti, joka voidaan myöhemmin kehittää 3D-animaatioon tai peliin.

Canvas3D ja Flickr

Flickrin valovirralla on täysin uusi 3D-kokemus.

Kankaan simulointi

Realistinen, HTML5-pohjainen kankaan simulointi.

Kehittyvä hirviö

Tarkkaile monsteri, joka kehittyy monimutkaiseksi olennoksi, yksi sen luoja on HTML5.

Google Giftbox

Giant-hakukone Google on esitetty 3D-muodossa.

JS Touch

Laadukas ja realistinen "3D 2D Canvas" -esityksessä.

Tietojen esittäminen

Vaikka HTML5: n kangaselementtiä voidaan käyttää animaation ja 3D-efektin luomiseen, se voidaan toteuttaa myös matemaattisten tietojen esittämiseen.

Gnuplot

Gnuplot, HTML5-versiota kuvaava sovellus.

RGraph

RGraph tarjoaa laajan valikoiman datan esitystapoja, kuten viivakaavion, etenemispalkin ja perinteisen tutkakaavion.

Verkkosovellus

Viime kädessä käyttämällä kaikkia HTML5: n ja muun langaugen yhdistämiä mahdollisuuksia voidaan luoda interaktiivinen sovellus tai peli, joka on lähellä Flash-sovellusta.

CanvasPaint

Todistaja, että Microsoft Paintin veli tulee selaimeesi, ja hänen isänsä on HTML5.

CanvasMol

Tieteellinen sovellus, joka on rakennettu auttamaan sinua ymmärtämään tiettyjä maadoituselementin rakenteita.

Cartoon Builder

Piirrä mielenkiintoinen piirretty kuva tällä vähäisellä ja vuorovaikutteisella sarjakuva-tekijällä.

Vedä mitään täällä

Voit näyttää yksityiskohtia vetämällä mitä tahansa vetämällä demosta.

Gartic-luonnos

Alkuperäinen HTML5-sovellus, jonka avulla voit tehdä joitakin peruspiirustuksia, jotka voidaan tallentaa eri kuvamuotoihin, kuten jpeg tai png.

PhysicSketch

Piirrä mitä haluat ja katso, miten he reagoivat simuloidun painovoiman kanssa.

Luonnoslehtiö

Tehokas HTML5-piirustusohjelma, jonka avulla voit piirtää ja muokata kuvaa tarkasti.

Jutustelu

Web-sovellus, joka vahvistaa Twitteristä hankitun säätietojen maantieteellisen sijainnin ja muodostaa ne siten kankaalle perustuvaksi "sosiaalisen sää" -kartaksi, joka on melko vähäpätöinen (kuten tekijä toteaa), mutta mielenkiintoinen.

Peli

3Bored

Et ikinä kyllästyisi, jos voit välttää satoja HTML5-luoteja seuraavassa sekunnissa.

Puhjeta

Palauta pallo rikkomaan kaikki tiilet.

Canvascape

Ei aivan pelin, mutta se osoittaa, miten HTML5: ää voidaan käyttää ensimmäisen persoonan ammunta-selaimen pelin kehittämiseen.

Ota se kiinni

Kuinka monta palloa voit väistää saadaksesi voittamasi HTML5-neliön?

Ketjureaktio

Ketjuta räjähdys tavoitteen saavuttamiseksi, älä päästä riippuvaisiksi.

Cubeout

Toista Tetris 3D-näkymässä.

etchaPhysics

Piirrä kohde siirtääksesi pallon tähteen, älä unohda painovoimaa.

Palapeli

Voit ratkaista tämän HTML5-pohjaisen palapelin napsauttamalla, kiertämällä ja pudottamalla palapelejä.

Slide Puzzle

Liu'uta voittoon, toinen HTML5-peli, joka on rakennettu puristamaan mielesi mehua.

Sama peli

Poista tietty ryhmä, jos haluat saada toisen ryhmän samaan väliin, ja saat lopulta voiton.

Tetris

Yksi klassisimmista peleistä, jotka HTML5 palasi elämään.

Torus

Vielä yksi Tetris-peli pseudo-3D-versiossa.

johtopäätös

Mikä on HTML5: n rajoitus? Tässä vaiheessa emme voi päättää, mutta alla olevan vaikuttavan videon avulla voimme tietää, kuinka pitkälle HTML5 on työnnetty:

Kyllä, se on Quake II web-selaimessa, joten nyt on hyvin selvää, että HTML5: n avulla syntyisi enemmän uraauurtava web-sovellus, joka palvelee miljardeja Internetin käyttäjiä. Se on nopeaa, se kehittyy, ja se muuttuu maailmanlaajuisesti. Kysymys kuuluu, miten käytät tätä pelin muuttavaa HTML5: ää?

Haluamme kuulla ideasi!