- 29
Elementti <canvas> on ollut ilmestys visuaalisille asiantuntijoille joukossamme. Canvas tarjoaa välineet uskomattomiin ja tehokkaisiin animaatioihin ilman Flashia; nämä kehittäjät voivat sen sijaan vilauttaa mahtavia JavaScript-taitojaan. Tässä on yhdeksän uskomatonta canvas-demoa, jotka saavat leukasi putoamaan!
Zen Photon Garden
Zen Photon Garden -demo on mielen räjäyttämisen ruumiillistuma. Tämä eeppinen canvas-demo mahdollistaa piirtämisen kankaalle reaktiivisilla valovirroilla, jolloin käyttäjä näkee, millainen hänen uuden linjansa lopputuote tulee olemaan. Vielä parempaa on, että tämän demon avulla voit tallentaa ja ladata tuotoksen.
Tear-able Cloth
Tear-able Cloth -demo on sytyttänyt verkon tuleen viime kuukausien aikana ja hyvästä syystä. Tämä demo on sujuvin näkemäsi ja ottaen huomioon sen suorittaman tehtävän ja sen, kuinka vähän koodia siihen liittyy, se vie henkeäsi. Siinä on muutakin kuin pelkkä vetäminen ja fysiikka – animaatio ja tarve ottaa huomioon tarpeeksi kova vetäminen, jotta kyynel voidaan animoida tyylikkäästi, tekee tästä demosta vieläkin hämmästyttävämmän. Täydellinen osoitus canvasin kyvyistä.
Check out this Pen!
Partikkelit
Check out this Pen!
Motion Graphic Typeface
Kunpa osaisin kuvailla, miten tämä efekti on tehty, mutta en osaa. Näen, että jokainen kirjain koostuu erilaisesta kuvatiedosta, mutta siinä kaikki. Sen voin sanoa, että tämä animaatio on aivan tajunnanräjäyttävä, kun kirjaimet animoituvat paikalleen ja se, miltä osin näet tekstin, riippuu hiiren asennosta. Järkyttävää.
Check out this Pen!
Motion Graphic Typeface II
Aivan kuin ensimmäinen ei olisi ollut tarpeeksi vaikuttava, toinen MGT-demo on Pulitzer-palkinnon arvoinen. Luopuisin toisesta, kolmannesta ja kahdeksannesta lapseni ollakseni näin fiksu. Sen lisäksi, että teksti animoituu, siinä on uskomaton värillinen blur, joka on osa animaatiota. Tämä demo on todella näkemisen arvoinen.
Check out this Pen!
Gestures + Reveal.JS
Nyt tämä demo räjäytti mieleni, mutta se räjäytti myös suorittimeni. Tämä harjoitus käyttää laitteesi kameraa ja mikrofonia liikuttamaan datakuutiota eleiden perusteella. Jos sinulla on MacBook Pro, sinun ei kannata kuolla ennen kuin olet kokeillut tätä. Käynnistä demo ja heiluttele käsiäsi — näet demon sisällön liikkuvan ja alat sitten uskoa henkiin.
Free Rider 2
Kankaan mahtavuutta ei voi käsitellä ottamatta mukaan ainakin yhtä peliä. Canvas on kiistatta HTML5-pelaamisen tulevaisuus, kuten Firefox OS pian osoittaa. Tämä loistava mutta yksinkertainen pyöräilypeli osoittaa, että canvas on valmis prime time!
30,000 Particles
30k Particles -demo sisältää todella mahtavia juttuja: ympyränmuotoisia muotoja (säde), animoituja räjähtäviä ja palaavia hiukkasia sekä hiirikuuntelijat, joiden avulla käyttäjä voi ohjata räjähdyksiä. Erinomainen esimerkki interaktiivisuudesta ja logiikasta.
Check out this Pen!
HTML5 Video Destruction
Minun on osoitettava kunnioitusta yhdelle ensimmäisistä todella huomiota herättävistä canvas-demoista, jonka näin — räjähtävälle canvas-videolle. Klikkaat videota ja palaset räjähtävät, mutta video jatkaa segmentin/asennon toistamista räjähdyksen aikana samalla kun se palaa alkuperäiseen asentoonsa. Inspiroiva demo meille kaikille.
