For the life of me I can not think of the term given to the cartoon animation technique when depth is created with layers and the characters move in front and behind the layers.
It doesn’t really matter. What does matter is that you can do it with HTML5 and there is no need for FLASH or video.
The still image shown has 5 layers. The sky, the mountains, and the brush are all static. The hiker and the bird move … Well, they don’t move in this blog post but if you head on over to this page then you can see what I mean.
I won’t go into great detail on how it’s done. The magic is just using two capabilities in HTML5. The first is the “canvas”. The second is the z-axis (depth). By creating multiple canvases and assigning each a differed order in the z-axis, you can achieve this old style animation.
If you want the code, just right-click on the page. It’s not pretty but it is good for learning. I’ll admit that the layers I am using are inefficiently large. I’d avoid that if you are going to do this for a real website. However, the technique works well for an animated banner or other small frame that would have previously been done with FLASH.