- 29
Prvek <canvas> je pro vizuální experty z našich řad zjevením. Plátno poskytuje prostředky pro neuvěřitelné a efektivní animace s tím, že navíc není potřeba Flash; tito vývojáři se místo toho mohou blýsknout svými úžasnými dovednostmi v JavaScriptu. Zde je devět neuvěřitelných demonstrací v plátně, ze kterých vám spadne čelist!
Zen Photon Garden
Demonstrace Zen Photon Garden je ztělesněním úchvatnosti. Toto epické demo plátna umožňuje kreslit na plátno pomocí reaktivních světelných proudů, díky čemuž uživatel vidí, jaký bude konečný produkt jeho nové linie. A co víc, toto demo umožňuje ukládat a načítat výstupy.
Trhatelné plátno
Demo Trhatelné plátno v posledních několika měsících rozpálilo web, a to z dobrého důvodu. Toto demo je nejplynulejší, jaké jste kdy viděli, a vzhledem k tomu, jaký úkol plní a jak málo kódu je do něj zapojeno, vám vyrazí dech. Je v něm víc než jen prosté tahání a fyzika – animace a nutnost zohlednit dostatečně silné tahání, aby bylo možné elegantně animovat trhání, dělá toto demo ještě úžasnějším. Dokonalá ukázka možností plátna.
Check out this Pen!
Částice
Check out this Pen!
Pohyblivé grafické písmo
Kéž bych mohl popsat, jak je tento efekt proveden, ale nemohu. Vidím, že každé písmeno se skládá z různých obrazových dat, ale to je asi tak všechno. Co mohu říci, je, že tato animace je naprosto úchvatná, protože písmena se animují na místě a poměr, ve kterém vidíte text, závisí na poloze myši. Šokující.
Check out this Pen!
Motion Graphic Typeface II
Jako by první ukázka nebyla dostatečně působivá, druhá ukázka MGT je hodna Pulitzerovy ceny. Vzdal bych se svého druhého, třetího a osmého dítěte, abych byl takhle chytrý. Nejenže se text animuje, ale součástí animace je i neuvěřitelná barevná šmouha. Na tuhle ukázku je opravdu radost pohledět.
Check out this Pen!
Gesta + Reveal.JS
Tato ukázka mi nejen vyrazila dech, ale vyrazila dech i mému procesoru. Toto cvičení využívá kameru a mikrofon vašeho zařízení k přesouvání krychle s daty na základě gest. Pokud máte MacBook Pro, neměli byste umřít dřív, než si to vyzkoušíte. Spusťte ukázku a mávejte rukama – uvidíte, jak se obsah ukázky pohybuje, a pak začnete věřit na duchy.
Free Rider 2
Nemůžete popsat úžasnost plátna, aniž byste do něj zahrnuli alespoň jednu hru. Plátno je pravděpodobně budoucností her HTML5, jak brzy ukáže Firefox OS. Tato brilantní, ale jednoduchá cyklistická hra ukazuje, že plátno je připraveno na hlavní čas!“
30 000 částic
Demonstrace 30 000 částic obsahuje několik opravdu úžasných věcí: kruhové tvary (poloměr), animované vybuchující a vracející se částice a poslouchání myší, které uživateli umožňuje výbuchy ovládat. Vynikající příklad interaktivity a logiky.
Check out this Pen!
Ničení videa HTML5
Musím vzdát hold jedné z prvních skutečně poutavých ukázek na plátně, kterou jsem viděl – explodujícímu videu na plátně. Kliknete na video a kousky explodují, video však během exploze stále přehrává svůj segment/pozici, zatímco se vrací na původní pozici. Inspirativní demo pro nás všechny.
.