48 brutal na mga demo ng HTML5 / CSS3

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.

pool ng bola

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

Blob Salad

Isang nilalang na HTML5 na nagsisigawang mangyaring sa iyo.

bombamo

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

Bola ng Browser

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

Mga bula

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

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.

coolclock

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

Flickr PS3 Slideshow

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

Pakikipag-ugnay na Polaroid

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

JS Paputok

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

Kaleydoskopo

Isang napaka nakakaakit at futuristikong HTML5 kaleidoscope.

Mga Maliit na Particle

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

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.

Cloud Nebula

Mawala sa kamangha-manghang HTML5 nebula na ito.

Paralaks

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

Animasyon ng Particle

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

Kumalat

Mawala sa walang katapusang kumalat na animasyon.

Starfield

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

Pagkawasak ng Video

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

Anyong alon

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

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.

Simula sa tela

Isang makatotohanang, batay sa HTML5 na kunwa sa tela.

Umuusbong na Halimaw

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

kahon ng regalo sa google

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

J.S. Touch

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

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.

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.

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.

CanvasMol

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

Tagabuo ng Cartoon

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

I-drag ang Anumang Narito

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

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.

PhysicalSketch

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

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.

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.