Canvas animation timeframe keyframe

9 Mind-Blowing Canvas Demos

The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that will make your jaw drop!

Hospy.co

1.  Zen Photon Garden

The Zen Photon Garden demo is the epitome of mind-blowing.  This epic canvas demo allows for drawing on the canvas with reactive light streams, allowing the user to see the end product of their new line will be.  Even better, this demo allows you to save and load output.

Canvas Demo

2.  Tear-able Cloth

The Tear-able Cloth demo has set the web alight over the past few months and for good reason.  This demo is the smoothest you’ll see and considering the task it accomplishes and the how little code is involved, it will take your breath away.  There’s more to it than simple pulling and physics — the animation and needing to account for pulling hard enough to elegantly animate a tear makes this demo even more amazing.  A perfect illustration of canvas’ capabilities.

2014-10-10 12_54_43-9 Mind-Blowing Canvas Demos

3.  Particles

It’s hard describe this demo outside of “ftw”.  This demo animates color, position, connection lines, and opacity, all the while animating smooth as a baby’s….it’s really smooth.  Marvel at this beast.

2014-10-10 12_55_45-9 Mind-Blowing Canvas Demos

4.  Motion Graphic Typeface

I wish I could describe how this effect is done but I can’t.  I see that each letter is comprised of different image data, but that’s about it.  What I can say is this animation is absolutely mind-blowing, as letters animate into place and the aspect at which you see the text depends on your mouse position.  Shocking.

2014-10-10 12_56_37-9 Mind-Blowing Canvas Demosasd

5.  Motion Graphic Typeface II

As if the first wasn’t impressive enough, the second MGT demo is one worthy of a Pulitzer Prize. I’d give up my second, third, and eighth-born to be this clever.  Not only does the text animate but there’s an incredible colored blur that’s part of the animation.  This demo is truly a sight to behold.

2014-10-10 12_54_43-9 Mind-Blowing Canvas Demos

6.  Gestures + Reveal.JS

Now only did this demo blow my mind, but it also blew my CPU.  This exercise uses your device’s camera and microphone to move a cube of data based on gestures.  If you have a MacBook Pro, you shouldn’t die before trying this out.  Start the demo and flail your arms about — you’ll se the demo content move about and then start believing in spirits.

7.  Free Rider 2

You can’t cover the awesomeness of canvas without including at least one game.  Canvas is arguably the future of HTML5 gaming, as Firefox OS will soon demonstrate.  This brilliant but simple bike game shows that canvas is ready for prime time!

Canvas Demo

8.  30,000 Particles

The 30k Particles demo incorporates some really awesome stuff:  circular shapes (radius), animated exploding and returning particles, and mouse listeners to allow the user to control the explosions.  An excellent example of interactivity and logic.

9.  HTML5 Video Destruction

I must pay homage to one of the first truly eye-catching canvas demos I saw — an explodable canvas video.  You click the video and pieces explode, yet the video keeps playing its segment/position during the explosion while it returns to its original position.  An inspiring demo to to all of us.

Canvas Demo

Advertisements

Beginner Resources to HTML5, JavaScript, jQuery, Backbone, and CSS3

A BEGINNER’S JOURNEY

HTML5

So, it is pretty obvious that you are going to need to learn HTML5 if you are doing to do front-end web development. From my experience most developers regardless of their language of choice know the basics of HTML. What they may or may not know are all the newer semantic tags, cross-browser tricks, and native JavaScript APIs.

There is plenty to learn in HTML5 without getting into the JavaScript APIs just yet. Once you learn JavaScript and feel comfortable in it, that may be the best time to tackle topics such as Geolocation, Web Sockets, Canvas, IndexDB, Web Workers, etc…

Resources

JAVASCRIPT

Even if you think you know JavaScript it might behoove you to go back and learn it from the beginning. A common danger is that developers think it looks just like their back-end language of choice (C, C++, C#, or Java) that they don’t invest time to learn how it is different.

JavaScript is a dynamic and functional language, which is considerably different than C# or Java for example. So, please take your time and pick up the language. If you don’t learn it appropriately you will invariably run into barriers down the road due to lack of understanding.

Resources

JQUERY

The jQuery library has been around for several years and has catapulted as one of the most used tools in the web developer’s belt. The reason for its vast usage is that it solves many of the cross-browser issues that creep up during development. The library is popular for both web developers and web designers. The community around jQuery is amazing and there are tons of jQuery plugins to choose from.

Resources

BACKBONE.JS

If you find yourself writing more and more JavaScript and jQuery then you may want to consider picking up Backbone.js to help you organize your web application. This library is also a great fit for Single Page Applications (SPA). Backbone.js uses the familiar MVC/MVP concepts of Models, Collections, Views, and Routers. In addition there is a nice Event model, History support, and a Sync mechanism. The community for Backbone.js is also very large and you can find many extensions and plugins to fit your needs.

Resources

CSS3

You may or may not have experience with CSS. Brushing up on CSS concepts would be a good thing. If you already feed proficient at CSS1-2, then you should pick up CSS3 as well. A lot of features have been added recently that is in most modern browsers. There are many things that you can do in CSS3 now where you used to use JavaScript or custom images.

Resources

FEATURE DETECTION

Inevitably you’ll need to support browsers that don’t support the native feature you are trying to use. Thankfully you can use Feature Detection to determine if the browser you are in implements that feature and if it doesn’t then you can provide functionality to mimic that feature (a.k.a. a polyfill or shim).

Resources

RESPONSIVE WEB DESIGN

Instead of implementing a different UI for mobile devices, tablets, and desktop browsers you can use responsive web design techniques to provide one experience that restructures the UI according to its size.

Resources

CONCLUSION

Hopefully the above resources will get you started in your transition to front-end web development. There is a lot to learn, but it is an exciting space that changes frequently. Having a desire to learn is a good trait to have in this field.

If you have any resources that you think I missed please add them in the comments and I’ll try to update the lists above if I think they are appropriate.