- 29
Elementet <canvas> har været en åbenbaring for de visuelle eksperter i vores rækker. Canvas giver mulighed for utrolige og effektive animationer med den ekstra bonus, at der ikke er brug for Flash; disse udviklere kan i stedet vise deres fantastiske JavaScript-færdigheder frem. Her er ni utrolige canvas-demoer, der vil få din kæbe til at falde ned!
Zen Photon Garden
Demoen Zen Photon Garden er indbegrebet af mind-blowing. Denne episke lærredsdemo giver mulighed for at tegne på lærredet med reaktive lysstrømme, så brugeren kan se, hvordan slutproduktet af deres nye linje bliver. Endnu bedre, denne demo giver dig mulighed for at gemme og indlæse output.
Tear-able Cloth
Demoen Tear-able Cloth har sat nettet i brand i løbet af de sidste par måneder, og det er der en god grund til. Denne demo er den smidigste, du kan se, og i betragtning af den opgave, den løser, og hvor lidt kode der er involveret, vil den tage pusten fra dig. Der er mere i det end blot træk og fysik – animationen og behovet for at tage højde for at trække hårdt nok til elegant at animere en tåre gør denne demo endnu mere fantastisk. En perfekt illustration af canvas’ muligheder.
Check out this Pen!
Particles
Check out this Pen!
Check out this Pen!
Motion Graphic Typeface
Jeg ville ønske, jeg kunne beskrive, hvordan denne effekt er lavet, men det kan jeg ikke. Jeg kan se, at hvert bogstav består af forskellige billeddata, men det er det hele. Det jeg kan sige er, at denne animation er helt fantastisk, da bogstaverne animeres på plads, og det aspekt, som du ser teksten i, afhænger af din museposition. Chokerende.
Check out this Pen!
Motion Graphic Typeface II
Som om den første ikke var imponerende nok, er den anden MGT-demo en demo, der er en Pulitzer-pris værdig. Jeg ville opgive min anden, tredje og ottende fødte for at være så klog. Ikke alene animeres teksten, men der er også en utrolig farvet sløring, som er en del af animationen. Denne demo er virkelig et syn at se.
Check out this Pen!
Gestures + Reveal.JS
Nu blæste denne demo mig ikke kun omkuld, men også min CPU. Denne øvelse bruger din enheds kamera og mikrofon til at flytte en terning af data baseret på gestikulationer. Hvis du har en MacBook Pro, bør du ikke dø, før du har prøvet dette. Start demoen og slå med armene rundt – du vil se demo-indholdet bevæge sig rundt og derefter begynde at tro på ånder.
Free Rider 2
Du kan ikke dække det fantastiske ved lærredet uden at inkludere mindst ét spil. Canvas er vel nok fremtiden for HTML5-spil, hvilket Firefox OS snart vil vise. Dette geniale, men enkle cykelspil viser, at canvas er klar til prime time!
30.000 Particles
Demoen 30k Particles indeholder nogle virkelig fede ting: cirkulære former (radius), animerede eksploderende og tilbagevendende partikler og muselyttere, der giver brugeren mulighed for at styre eksplosionerne. Et glimrende eksempel på interaktivitet og logik.
Check out this Pen!
HTML5 Video Destruction
Jeg må hylde en af de første virkelig iøjnefaldende lærredsdemoer, jeg så – en eksploderbar lærredsvideo. Man klikker på videoen, og stykker eksploderer, men videoen fortsætter med at afspille sit segment/position under eksplosionen, mens den vender tilbage til sin oprindelige position. En inspirerende demo til for os alle.
