- 29
Elementul <canvas> a fost o revelație pentru experții vizuali din rândurile noastre. Canvas oferă mijloacele pentru animații incredibile și eficiente, cu bonusul suplimentar de a nu avea nevoie de Flash; în schimb, acești dezvoltatori își pot etala abilitățile impresionante de JavaScript. Iată nouă demonstrații canvas incredibile care vă vor face să vă rămână cu gura căscată!”
Zen Photon Garden
Demonstrația Zen Photon Garden este întruchiparea de uluitor. Această demonstrație epică de pânză permite desenarea pe pânză cu ajutorul unor fluxuri de lumină reactivă, permițând utilizatorului să vadă care va fi produsul final al noii sale linii. Chiar mai bine, acest demo vă permite să salvați și să încărcați rezultatul.
Tear-able Cloth
Demonstrația Tear-able Cloth a aprins web-ul în ultimele câteva luni și pe bună dreptate. Acest demo este cel mai fluid pe care îl veți vedea și, având în vedere sarcina pe care o îndeplinește și cât de puțin cod este implicat, vă va tăia respirația. Este mai mult decât simpla tragere și fizica – animația și necesitatea de a ține cont de tragerea suficient de puternică pentru a anima elegant o lacrimă face ca acest demo să fie și mai uimitor. O ilustrare perfectă a capacităților canvas-ului.
Check out this Pen!
Particles
Check out this Pen!
Motion Graphic Typeface
Aș vrea să pot descrie cum este realizat acest efect, dar nu pot. Văd că fiecare literă este compusă din date de imagine diferite, dar cam atât. Ceea ce pot spune este că această animație este absolut uluitoare, deoarece literele se animă la locul lor, iar aspectul în care vezi textul depinde de poziția mouse-ului. Șocant.
Check out this Pen!
Motion Graphic Typeface II
De parcă primul nu era suficient de impresionant, al doilea demo MGT este unul demn de un premiu Pulitzer. Aș renunța la al doilea, al treilea și al optulea meu născut pentru a fi atât de inteligent. Nu numai că textul este animat, dar există și o neclaritate colorată incredibilă care face parte din animație. Acest demo este cu adevărat o priveliște de admirat.
Gestures + Reveal.JS
Acum numai că acest demo m-a uimit, dar mi-a uimit și CPU-ul. Acest exercițiu folosește camera și microfonul dispozitivului dvs. pentru a muta un cub de date pe baza gesturilor. Dacă aveți un MacBook Pro, nu ar trebui să muriți înainte de a încerca acest lucru. Porniți demo-ul și agitați brațele – veți vedea cum se mișcă conținutul demo-ului și apoi veți începe să credeți în spirite.
Free Rider 2
Nu puteți acoperi grozăvia de pânză fără să includeți cel puțin un joc. Canvas este, fără îndoială, viitorul jocurilor HTML5, așa cum va demonstra în curând Firefox OS. Acest joc de bicicletă genial, dar simplu, arată că canvas este pregătit pentru prime time!
30,000 Particles
Demonstrația 30k Particles încorporează câteva lucruri cu adevărat impresionante: forme circulare (rază), particule animate care explodează și se întorc și ascultători de mouse pentru a permite utilizatorului să controleze exploziile. Un exemplu excelent de interactivitate și logică.
HTML5 Video Destruction
Trebuie să aduc un omagiu unuia dintre primele demonstrații canvas cu adevărat atrăgătoare pe care le-am văzut – un video canvas explodabil. Faci clic pe video și piesele explodează, însă videoclipul continuă să redea segmentul/poziția sa în timpul exploziei, în timp ce revine la poziția inițială. Un demo inspirat pentru noi toți.
.