48 brutal na mga demo ng HTML5 / CSS3

cartoon ng canvas cartoon HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Kinukuha ko ang post na ito upang malutas ang isang katanungan na tinanong mo kamakailan sa mga komento ng isang artikulo:

Kailan isang magandang panahon upang simulang ganap na magdisenyo sa HTML5?

Kaya, sa totoo lang, nakasalalay ito sa target na iyong tina-target. Kung hindi mo planuhin ang iyong mga bisita na gumamit ng Internet Explorer (hal: pahina ng software ng Mac) pagkatapos ay magsimula kaagad sa HTML5, ngunit kung kailangan mo ng mga taong may IE upang makita ang iyong website, mas mahusay kang maghintay ...

Sa entry, na rin pagkatapos ng jump 48 demo ng HTML5 na kamangha-manghang at karapat-dapat na makita. Mahusay ay maliit.

Pinagmulan | HongKiat

aAudio Burst Animation

Isang komportable at kamangha-manghang animasyon na nilikha gamit ang canvas at audio tag ng HTML5.

audioburst animation HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

pool ng bola

Ipinapakita sa huling kaganapan sa Google I / O, ipinapakita sa iyo ng demo na ito kung gaano kahusay ang HTML5.

ball pool HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Blob Salad

Isang nilalang na HTML5 na nagsisigawang mangyaring sa iyo.

blob sallad HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

bombamo

Sa Bomomo, maaari mong obserbahan ang iba't ibang kilusang atomic na tinulad sa HTML5.

bomomo HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Bola ng Browser

Manghang-mangha sa ballong HTML5 na 'cross-browser' na ito.

browser ball HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Mga bula

Magsaya sa pamamagitan ng paglikha ng walang katapusang lumulutang na mga bula na may iba't ibang kulay.

Mga bula ng HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Canvas Cartoon Animation

Isang simple at nakakatawang cartoon na HTML5 na makakatulong sa iyo na maunawaan kung ano ang maaaring gawin ng elemento ng canvas ng HTML5.

cartoon ng canvas cartoon HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

coolclock

Isang magandang, napapasadyang analog na orasan na binuo ng HTML5 at JavaScript.

coolclock HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Flickr PS3 Slideshow

Tingnan ang mga larawan ng iyong Flickr na may slideshow style sa PS3 sa web browser.

flickr ps3 slideshow HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Pakikipag-ugnay na Polaroid

Isang interactive na demo na gumagana nang halos katulad sa multi touch interface.

interactive polaroid HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

JS Paputok

Masiyahan sa sandali ng paputok gamit ang iyong ginustong gravity at bilis, na pinalakas ng HTML5 at Javascript.

js paputok HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Kaleydoskopo

Isang napaka nakakaakit at futuristikong HTML5 kaleidoscope.

kaleidoscope HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Mga Maliit na Particle

Ang sensitibong maliit na butil na animasyon na tumutugon batay sa iyong paggalaw ng mouse.

likidong mga maliit na butil HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

mapang-akit

Isa pang sensitibo at natitirang demo ng HTML5 na nagpapakita kung paano tumugon ang mga kalapit na elemento sa iyong paggalaw ng mouse.

mesmerizer HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Cloud Nebula

Mawala sa kamangha-manghang HTML5 nebula na ito.

nebula cloud HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Paralaks

Tingnan ang lahat ng mga 2D na hugis sa parallel na pananaw.

parallax HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Animasyon ng Particle

Isang matikas na animasyon na HTML5 na maliit na butil na maaaring mabuo sa iyong ginustong mensahe.

maliit na butil na animasyon ng HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Kumalat

Mawala sa walang katapusang kumalat na animasyon.

kumalat ang HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Starfield

Isang napaka-cool na animasyon ng HTML5 starfield na magbabago ng direksyon at bilis batay sa paggalaw ng iyong mouse.

starfield HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Pagkawasak ng Video

Isang pag-click upang mapalakas ang isang nagpe-play na video.

pagkawasak ng video HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Anyong alon

Pansinin kung paano gumagalaw ang canvas wave ng HTML5 sa pamamagitan ng pagbabago ng amplitude, haba ng daluyong, lapad, atbp.

waveform HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Epekto ng 3D

Pinahanga ng animasyon ng canvas? Mas maraming magagawa ang elemento ng canvas ng HTML5, at tinatawag itong 3D na epekto. Maaaring umasa ang developer sa elemento ng canvas, DOM at JavaScript upang lumikha ng 3D na epekto, na sa paglaon ay mabuo sa 3D animasyon o laro.

Canvas3D at Flickr

Magkaroon ng isang buong bagong karanasan sa 3D sa photostream ni Flickr.

canvas3d at flickr HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Simula sa tela

Isang makatotohanang, batay sa HTML5 na kunwa sa tela.

tela ng simulation HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Umuusbong na Halimaw

Pagmasdan ang isang halimaw na umuusbong sa isang kumplikadong nilalang, ang isa sa tagalikha nito ay HTML5.

umuusbong na halimaw na HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

kahon ng regalo sa google

Giant search engine na Google ay ipinakita sa 3D, nape-play na view.

google giftbox HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

J.S. Touch

Isang mataas na kalidad at makatotohanang '3D sa 2D Canvas' showcase.

js hawakan ang HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Pagtatanghal ng Data

Habang ang elemento ng canvas ng HTML5 ay maaaring magamit upang lumikha ng animasyon at epekto ng 3D, maaari rin itong ipatupad upang ipakita ang datos ng matematika.

gnuplot

Ang Gnuplot, isang application ng paglalagay ng data sa bersyon na HTML5.

gnuplot HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

RGraph

Nagbibigay ang RGraph ng isang malawak na hanay ng pagtatanghal ng data tulad ng tsart ng bar, progress bar at tradisyonal na radar chart.

rgraph HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Application sa Web

Sa huli, gamit ang lahat ng mga posibilidad na sinamahan ng HTML5 at iba pang langauge, maaaring lumikha ang isa ng interactive na application o laro na malapit sa Flash application.

CanvasPaint

Saksihan ang kapatid ng Microsoft Paint sa iyong web browser, at ang kanyang ama ay HTML5.

canvaspaint HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

CanvasMol

Isang pang-agham na aplikasyon na kung saan ay binuo upang matulungan kang maunawaan ang istraktura ng tiyak na elemento ng lupa.

canvasmol HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Tagabuo ng Cartoon

Gumuhit ng kagiliw-giliw na imahe ng cartoon sa minimal at interactive na tagabuo ng cartoon.

tagabuo ng cartoon HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

I-drag ang Anumang Narito

I-drag ang anumang maaari mong i-drag sa demo upang ipakita ang mga detalye.

i-drag ang anumang bagay dito HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Gartic sketch

Isang orihinal na application na HTML5 na nagbibigay-daan sa iyo upang gumawa ng ilang pangunahing mga guhit na maaaring mai-save sa iba't ibang format ng imahe tulad ng jpeg o png.

gartic sketch HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

PhysicalSketch

Iguhit ang anumang gusto mo at tingnan kung ano ang reaksyon nila na may simulate gravity.

physicsketch HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Sketchpad

Isang malakas na application ng pagguhit ng HTML5 na nagbibigay-daan sa iyo upang gumuhit at mag-edit ng iyong imahe sa tumpak na pamamaraan.

sketchpad HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

tahimik na usapan

Isang web application na nagpapatunay sa posisyon na pangheograpiya ng mensahe na nauugnay sa lagay ng panahon na nakuha mula sa Twitter, kung gayon nabubuo ang mga ito sa isang mapang 'social weather' na nakabatay sa canvas, medyo walang halaga (tulad ng sinabi ng may akda) ngunit kawili-wili.

smalltalk HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Laro

3Nababagot

Hindi ka maiinip kung maaari mong panatilihin ang pag-iwas sa daan-daang mga bala ng HTML5 sa susunod na segundo.

3bored HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Breakout

Rebound ang bola upang masira ang lahat ng mga brick.

breakout HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

canvasscape

Hindi masyadong isang laro, ngunit ipinapakita nito kung paano magagamit ang HTML5 upang paunlarin ang browser ng First Person Shooting browser.

canvascape HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Saluhin mo

Gaano karaming mga bola ang maaari mong umiwas upang makuha ang iyong nanalong parisukat na HTML5?

mahuli ito HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Chain reaksyon

Ikadena ang pagsabog upang makamit ang layunin, huwag mag-adik.

reaksyon ng kadena HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

cubeout

I-play ang Tetris sa 3D, tuktok-down na pagtingin.

cubeout HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

etchaPhysics

Gumuhit ng item upang ilipat ang bola sa bituin, huwag kalimutan ang tungkol sa gravity.

etchaphysics HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Lagari tuliruhin

I-click, paikutin at i-drop ang mga piraso ng palaisipan upang malutas ang puzzle na batay sa HTML5 na jigsaw.

jigsaw puzzle HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Slide Puzzle

Dumulas sa tagumpay, isa pang laro ng HTML5 na binuo upang mapisil ang iyong katas sa isip.

slide puzzle HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Parehas na laro

Alisin ang ilang mga pangkat upang makakuha ng isa pang pangkat na ipinares sa parehong kulay at sa huli ay bibigyan ka ng isang tagumpay.

parehong laro HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Tetris

Ang isa sa mga pinaka-klasikong laro na binuhay ng HTML5.

tetris HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash

Tors

Ngunit isa pang laro ng Tetris sa pseudo-3D na bersyon.

torus HTML5 Showcase: 48 Mga Potensyal na Demo sa Pagpapatay ng Flash


7 na puna, iwan mo na ang iyo

Iwanan ang iyong puna

Ang iyong email address ay hindi nai-publish. Mga kinakailangang patlang ay minarkahan ng *

*

*

  1. Responsable para sa data: Miguel Ángel Gatón
  2. Layunin ng data: Kontrolin ang SPAM, pamamahala ng komento.
  3. Legitimation: Ang iyong pahintulot
  4. Komunikasyon ng data: Ang data ay hindi maiparating sa mga third party maliban sa ligal na obligasyon.
  5. Imbakan ng data: Ang database na naka-host ng Occentus Networks (EU)
  6. Mga Karapatan: Sa anumang oras maaari mong limitahan, mabawi at tanggalin ang iyong impormasyon.

  1.   lollipop dijo

    ANG TETRIS AY HINDI PUMUNTA, AKO AY NAGLALABAD NG DALAWANG PIECES AT TUMINDIG PERO ANG PANAHON AY NAPAKAINGON NG CHAVALES

  2.   Elisa dijo

    Gusto ko ang pahinang ito ... maliban sa unang laro. Mahal kita Fran =)
    Bye a kiss to the world toooodooooooo

  3.   helsic dijo

    Hindi kapani-paniwala, kamangha-manghang. Hindi ako makapaniwala kung gaano kalayo dumating ang pag-unlad ng web!

  4.   Joe vega dijo

    Hindi ko alam kung bakit ang mga mapagkukunang ito ay maiugnay sa HTML5, ito ay purong Javascript, bago ang pagtaas ng Flash, na may Javascript lahat ng mga bagay na ito ay maaaring magawa, mayroong isang pag-aaral sa Barcelona na gumawa ng ilang mga site na sa oras na iyon ay pumutok ang aking ulo, lahat sa javascript nang labis na natutunan ako mula sa kanila at dinisenyo ang isang pares na may mga nagba-bola na bola at lahat, ganap na nawala ako sa kanila at pinagsisisihan pa rin ito. Hindi ko matandaan ang pangalan ng studio na ito ay tulad ng sa iyo2 o 2you2 na nasa 98 o higit pa.

  5.   ASDF dijo

    Joe Vega …… ipinapakita nito na wala kang ideya tungkol sa HTML5… .lol

  6.   Joe vega dijo

    Maaaring wala kang anumang madugong ideya ng html5, totoo ito, ngunit nagkakamali ka ng tandang para sa manukan at hindi naiiba ang isang wika mula sa isang kapaligiran. Hinahamon ko kayo na gumawa ng isang halimbawa tulad ng mga dito nang hindi gumagamit ng Javascript, sa html5 lamang, at mauunawaan mo kung ano ang ibig kong sabihin sa post na tinanggal ko. Ano pa, tiningnan ko ang source code ng mga halimbawa at maraming mga maaaring madaling gawin nang hindi kinakailangang i-mount ito sa html5.
    Ang html5 na iyon ay nagdudulot ng maraming mga pagpapabuti at mga bagay na nagpapadali ng marami ay totoo, ngunit ang mga mahinahon sa kamangha-manghang bagay na ipinakita sa pahinang ito ay ang Javascript.

  7.   santiago barcheta dijo

    Interesado akong gumawa ng mga pagtatanghal ng ganitong uri ... mayroon ka bang isang tutorial o pahina na may mga mapagkukunan ??? Salamat!!!