Webové stránky HTML5 predstavia 48 potenciálnych demotivujúcich ukážok

Takže ste počuli všetky fámy o HTML5 prevzali Adobe Flash. Zatiaľ čo väčšina webových spoločenstiev tvrdí, že je to možné alebo nie, musíte sa túlať, čo robí HTML5 tak silným, že dokonca obrovská spoločnosť Apple ju chce použiť na nahradenie Flash.

Preto tento príspevok existuje, nebudeme hovoriť o tom, čo HTML5 môže robiť, ale ukázať živé ukážky magických vecí, ktoré môže HTML5 dosiahnuť s iným jazykom, ako je JavaScript, takže sa pripravte na inšpiráciu.

Poznámka: Keďže HTML5 nie je plne podporovaný určitým webovým prehliadačom ako je Internet Explorer, dôrazne odporúčame použiť prehliadač Firefox na zobrazenie všetkých demoverzi HTML5 nižšie.

animácie

Element plátna HTML5 je rozhodujúcim faktorom, ktorý má HTML5 nahradiť určitú animáciu Flash. Umožňuje vytvárať dynamické, skriptovateľné vykresľovanie 2D tvarov a bitmapových obrázkov pomocou Javascriptu, ktoré iným spôsobom znamená ovládateľnú animáciu.

Audioburst Animácia

Komfortná a fantastická animácia vytvorená pomocou plagátov a zvukových značiek HTML5.

Ball Pool

Tento demo, ktorý bol prezentovaný v poslednej udalosti I / O Google, vám ukáže, ako dynamicky môže byť HTML5.

Blob Sallad

Tvorivo, ktoré vám prináša plodnosť v HTML5, by vás potešilo.

Bomomo

S Bomomom môžete pozorovať rôzne atómové pohyby simulované pomocou HTML5.

Prehliadač loptu

Získajte prekvapenie s touto loptou HTML5 s viacerými prehliadačmi.

Bubliny

Zabávajte sa tým, že vytvoríte nekonečné plávajúce bubliny s rôznou farbou.

Kreslené kreslené animácie

Jednoduchý a zábavný animovaný HTML5, ktorý vám pomôže pochopiť, čo môže HTML5 plátno element urobiť.

Coolclock

Príjemné prispôsobiteľné analógové hodiny postavené pomocou HTML5 a JavaScript.

Flickr PS3 Slideshow

Prezrite si fotografie vo Flickr vo formáte prezentácie v štýle PS3 vo webovom prehliadači.

Interaktívny Polaroid

Interaktívne demo, ktoré funguje veľmi podobne ako multi touch interface.

JS Ohňostroj

Vychutnajte si okamih ohňostrojov s preferovanou gravitáciou a rýchlosťou, poháňaný HTML5 a Javascript.

kaleidoskop

Veľmi krásny a futuristický kaleidoskop HTML5.

Tekuté častice

Citlivú časticovú animáciu, ktorá reaguje na pohyb myši.

Mesmerizer

Ďalšia citlivá a vynikajúca ukážka HTML5, ktorá ukazuje, ako v okolí reagujú prvky pohybujúce sa myšou.

Hmlovina Cloud

Ztrate sa s touto skvelou hmlovinou HTML5.

Parallax

Zobrazte všetky 2D tvary v paralelnej perspektíve.

Animácia častíc

Elegantná animácia častíc HTML5, ktorá sa môže vytvoriť v preferovanej správe.

nátierka

Zmeňte sa s touto nekonečnou šírkou animácie.

hviezdne

Veľmi cool HTML5 animácia hviezdneho poľa, ktorá by zmenila smer a rýchlosť na základe pohybu myši.

Zničenie videa

Jedným kliknutím môžete rozohnať hranie videa.

vlnovú

Pozorujte, ako sa vlna plátna HTML5 pohybuje zmenou jeho amplitúdy, vlnovej dĺžky, šírky atď.

3D efekt

Zapôsobené animáciou na plátne? To je viac, čo môže HTML5 plátno prvok robiť, a to sa nazýva 3D efekt. Vývojár sa môže spoliehať na plátno prvok, DOM a JavaScript na vytvorenie 3D efektu, ktorý sa neskôr môže rozvinúť do 3D animácie alebo hry.

Canvas3D a Flickr

Vyskúšajte úplne novú 3D skúsenosť s Flickrovým fotostreamom.

Simulácia látok

Realistická simulácia tkaniny na základe HTML5.

Evolúcia Monster

Pozorujte monštrum, ktoré sa vyvíja do zložitého stvorenia, jeden z jeho tvorcov je HTML5.

Google Giftbox

Obrovský vyhľadávací nástroj Google je prezentovaný v 3D prehrateľnom zobrazení.

JS Touch

Vysoko kvalitný a realistický vitríny 3D na 2D plátne.

Prezentácia údajov

Zatiaľ čo prvok plátna HTML5 môže byť použitý na vytvorenie animácie a 3D efektu, môže byť implementovaný aj na prezentáciu matematických údajov.

gnuplot

Gnuplot, aplikácia na vykresľovanie údajov vo verzii HTML5.

RGraph

RGraph ponúka širokú škálu prezentácií údajov, ako je stĺpcový graf, ukazovateľ priebehu a klasický radarový graf.

Webová aplikácia

V konečnom dôsledku s využitím všetkých možností kombinovaných s HTML5 a inými langaugemi môžete vytvoriť interaktívnu aplikáciu alebo hru, ktorá sa blíži aplikácii Flash.

CanvasPaint

Skontrolujte, či brat Microsoft Paint prichádza do vášho webového prehliadača a jeho otec je HTML5.

CanvasMol

Vedecká aplikácia, ktorá vám pomôže pochopiť štruktúru niektorých prvkov zeme.

Cartoon Builder

Nakreslite zaujímavý kreslený obraz s týmto minimálnym a interaktívnym tvorcom karikatúr.

Presuňte niečo tu

Ak chcete zobraziť podrobnosti, potiahnite všetko, čo môžete presunúť do demo.

Gartic Sketch

Originálna aplikácia HTML5, ktorá vám umožňuje vytvoriť niektoré základné výkresy, ktoré je možné uložiť do iného formátu obrázkov, napríklad jpeg alebo png.

PhysicSketch

Nakreslite čo chcete a uvidíte, ako reagujú s simulovanou gravitáciou.

Sketchpad

Výkonná aplikácia výkresu HTML5, ktorá umožňuje presne kresliť a upraviť obrázok.

Debata

Webová aplikácia, ktorá potvrdzuje geografickú polohu hlásenia súvisiaceho s počasím získaným od Twitteru, a tak ich formuje do mapy "sociálneho počasia" založenej na plátne, dosť triviálne (ako uviedol autor), ale zaujímavé.

Hra

3Bored

Nenecháte sa nudiť, ak sa v ďalšej sekunde môžete vyhnúť strate stovky stĺpcov HTML5.

Breakout

Odskočiť loptičku, aby ste zlomili všetky tehly.

Canvascape

Nie je to úplne hra, ale ukazuje, ako môže byť HTML5 použitý na vývoj hry pre prehliadač First Person Shooting.

Chyť to

Koľko loptičiek sa môžete vyhnúť, aby ste získali svoje víťazné pole HTML5?

Reťazová reakcia

Reťazec explózie na dosiahnutie cieľa, nezískajte závislosť.

Cubeout

Zahrajte si Tetris v 3D, zhora nadol.

etchaPhysics

Nakreslite položku a presuňte ju na hviezdu, nezabudnite na gravitáciu.

Jigsaw Puzzle

Kliknite, otočte a pusťte kusy hádanky, aby ste vyriešili túto puzzle založenú na HTML5.

Slide Puzzle

Presuňte sa na víťazstvo, ďalšiu hru HTML5, ktorá je postavená na to, aby ste stlačili svoju šťavu z mysle.

Rovnaká hra

Odstráňte určitú skupinu, aby ste získali inú skupinu spárovanú v rovnakej farbe a nakoniec ste získali víťazstvo.

tetris

Jedna z najviac klasických hier priniesla späť do života HTML5.

torus

Ešte ďalšia hra Tetris v pseudo-3D verzii.

záver

Aké je obmedzenie HTML5? V tomto momente sa nemôžeme rozhodnúť, ale s impozantným videom nižšie vieme, do akej miery bol HTML5 stlačený:

Áno, je to Quake II vo webovom prehliadači, takže teraz je veľmi jasné, že s HTML5 sa vytvorí viac priekopníckej webovej aplikácie, ktorá bude slúžiť miliónom užívateľov internetu. Je to rýchle, vyvíja sa a mení sa svetový web. Otázkou je, ako by ste použili tento HTML5 na zmenu hry?

Radi by sme počuli váš nápad!