48 brutális HTML5 / CSS3 demó

Ezt a bejegyzést választ adom arra a kérdésre, amelyet a közelmúltban tett fel egy cikk kommentjeiben:

Mikor lenne jó ideje elkezdeni a teljes tervezést a HTML5 segítségével?

Nos, őszintén szólva, attól függ, hogy milyen célt céloz meg. Ha nem tervezi a látogatók számára az Internet Explorer (pl: Mac szoftveroldal) használatát, akkor azonnal kezdje el a HTML5 használatát, de ha IE-vel rendelkező emberekre van szüksége, hogy megtekinthessék a webhelyét, jobb, ha megvárja ...

A bejegyzésnél, jóval az ugrás után 48 HTML5 demó, amelyek csodálatosak és megérdemlik, hogy megnézzék őket. A nagy kevés.

Forrás | HongKiat

audioburst animáció

Kényelmes és fantasztikus animáció, amelyet a HTML5 vásznával és hangcímkéivel készítettek.

Ball pool

A legutóbbi Google I / O eseményen bemutatva ez a bemutató megmutatja, milyen dinamikus lehet a HTML5.

folt saláta

Egy HTML5 által létrehozott lény, amely örömet szerezne neked.

bomomo

A Bomomo segítségével megfigyelheti a HTML5-vel szimulált különböző atommozgásokat.

Böngésző labda

Lenyűgözzön ezzel a 'cross-browser' HTML5 labdával.

Buborékok

Jó szórakozást hozzon létre végtelen, különböző színű lebegő buborékokból.

Vászon rajzfilm animáció

Egyszerű és vicces HTML5 rajzfilm, amely segít megérteni, mire képes a HTML5 vászon eleme.

coolclock

Szép, testreszabható analóg óra, amelyet HTML5 és JavaScript épített.

Flickr PS3 diavetítés

Tekintse meg Flickr fényképeit a PS3 stílusú diavetítéssel a webböngészőben.

Interaktív Polaroid

Interaktív bemutató, amely a multi touch felülethez hasonlóan működik.

JS tűzijáték

Élvezze a tűzijáték pillanatát a kívánt súlyossággal és sebességgel, HTML5 és Javascript segítségével.

Kaleidoszkóp

Nagyon szép és futurisztikus HTML5 kaleidoszkóp.

Folyékony részecskék

Érzékeny részecske-animáció, amely az egér mozgása alapján reagál.

Mesmerizáló

Egy másik érzékeny és kiemelkedő HTML5-bemutató, amely megmutatja, hogy a közeli elemek hogyan reagálnak az egér mozgásával.

Ködfelhő

Tévedj el ezzel a csodálatos HTML5 köddel.

Parallaxis

Az összes 2D alakzat megtekintése párhuzamos nézőpontban

Részecske animáció

Elegáns HTML5 részecske animáció, amely az Ön által preferált üzenetgé formálódhat.

Elterjed

Tévedj el ezzel a végtelen terjedésű animációval.

csillagmezõ

Nagyon jó HTML5 csillagmező animáció, amely megváltoztatja az irányt és a sebességet az egér mozgása alapján.

Videó megsemmisítése

Egy kattintás a lejátszott videó fellendüléséhez.

hullámforma

Figyelje meg, hogyan mozog a HTML5 vászonhulláma amplitúdójának, hullámhosszának, szélességének stb. Megváltoztatásával.

3D effektus

Lenyűgözött a vászonanimáció? Ez inkább a HTML5 vászon elemére képes, és ezt 3D-effektusnak hívják. A fejlesztő a vászonelemre, a DOM-ra és a JavaScript-re támaszkodva hozhat létre 3D-hatást, amelyet később 3D-s animációvá vagy játékká lehet fejleszteni.

Canvas3D és Flickr

Teljesen új 3D élményt szerezhet a Flickr fotófolyamjával.

Ruhaszimuláció

Reális, HTML5 alapú ruhaszimuláció.

Fejlődő szörny

Figyelje meg a szörnyet, amely bonyolult teremtménnyé fejlődik, egyik alkotója a HTML5.

Google Ajándékdoboz

Óriási keresőmotor A Google 3D-s, lejátszható nézetben jelenik meg.

J.S. Touch

Kiváló minőségű és valósághű „3D a 2D vásznon” kirakat.

Adatok bemutatása

Míg a HTML5 vászon eleme animáció és 3D effektusok létrehozására használható, matematikai adatok bemutatására is alkalmazható.

gnuplot

Gnuplot, HTML5 változatú adatrajzoló alkalmazás.

RGraph

Az RGraph az adatok megjelenítésének széles skáláját kínálja, például oszlopdiagramot, előrehaladási sávot és hagyományos radartáblát.

Webalkalmazás

Végül a HTML5 és más langauge által kombinált összes lehetőség felhasználásával interaktív alkalmazás vagy játék hozható létre, amely közel áll a Flash alkalmazáshoz.

CanvasPaint

Tanúja, hogy a Microsoft Paint testvére belép a webböngészőbe, és az apja HTML5.

CanvasMol

Tudományos alkalmazás, amely segít megérteni bizonyos földelemek szerkezetét.

Rajzfilmépítő

Rajzoljon érdekes rajzfilm képet ezzel a minimális és interaktív rajzfilm készítővel.

Húzza ide bármit

A részletek megjelenítéséhez húzza bármit, amit a bemutatóban húzhat.

Gartikus vázlat

Eredeti HTML5 alkalmazás, amely lehetővé teszi néhány alapvető rajz készítését, amelyek különböző képformátumba menthetők, például jpeg vagy png.

PhysicalSketch

Rajzoljon tetszését, és nézze meg, hogyan reagálnak szimulált gravitációval.

Rajztábla

Erőteljes HTML5 rajzalkalmazás, amely lehetővé teszi a kép pontos rajzolását és szerkesztését.

Csevej

Egy internetes alkalmazás, amely megerősíti a Twitterről szerzett időjárással kapcsolatos üzenetek földrajzi helyzetét, így vászonalapú „társadalmi időjárási” térképpé formálva őket, amelyek meglehetősen triviálisak (a szerző szerint), de érdekesek.

játék

3 Unatkozik

Soha nem fog unatkozni, ha a következő másodpercben folyamatosan kibújhat HTML5 golyók százaitól.

Kitör

Rebound a labdát, hogy megtörje az összes téglát.

vászonkép

Nem egészen játék, de bemutatja, hogy a HTML5 hogyan használható az First Person Shooting böngészős játék fejlesztésére.

Kapd el

Hány golyót tud kikerülni, hogy megszerezze a nyerő HTML5 négyzetet?

Láncreakció

A cél elérése érdekében láncolja meg a robbanást, ne szenvedjen függőséget.

kocka

Játszd a Tetrist 3D-s, felülről lefelé nézetben.

etchaFizika

Rajzolj elemet a labda csillaghoz mozgatásához, ne felejtsd el a gravitációt.

Mozaikrejtvény

Kattintson, forgassa és dobja le a puzzle darabokat, hogy megoldja ezt a HTML5 alapú puzzle-t.

Slide Puzzle

Csúszik a győzelemhez, egy másik HTML5-játék, amelyet úgy alakítottak ki, hogy kipréselje az agyad.

Ugyanaz a játék

Távolítson el bizonyos csoportokat, hogy egy másik csoport ugyanabban a színben párosuljon, és végül győzelmet kap.

Tetris

Az egyik legklasszikusabb játék, amelyet a HTML5 új életre hívott.

oszlopláb

Még egy Tetris játék ál-3D változatban.