How is this HTML animation of raster images accomplished?-CodePudding

This question was

I need to understand how the animation here was authored and implemented. Can anyone help me learn this?

I inspected it and there seem to be several components that make it up but I can't make any sense of it all. Is this technique too sophisticated to be in common use? I have looked at some animation tools and searched everywhere for info and I'm not finding any clues.

CodePudding user response：

Inspecting the animation a little closer, we can see that it's made of two different HTML elements. There is a parent <div> that has CSS background: url(/assets/images/home/raze-reyna.png) top/100% auto no-repeat; which is a static image (not animated).

Then, within that parent <div> is a <canvas> element, which layers the animated pieces over the static background.

Learn more about the <canvas> element on

Parent Div's background element removed

You can play around with this by toggling the background: url(/assets/images/home/raze-reyna.png) top/100% auto no-repeat on and off.

CodePudding user response：

"...I need to understand it technically. There are some cases where I see still raster images that have had animation added to them on the web, yet they are not video so they can be used with much more versatility and as I understand it with lower performance impact."

"I need to understand how the animation here was authored and implemented. Can anyone help me learn this?"

With regards to the link you posted:
- What is it?
This is basically PNG based sprite sheet animation. You can research those keywords for articles / tutorials. Here is one tutorial that explains the concept visually and with code examples.

I can't say if it has a "lower performance impact" always, but in the case of your link then yes it would help there because 90% of the image is static and only a small percentage (of the total image area) is animated. So it makes sense to use sprites for small elements like a hand moving left/right...
- How is it done?
This is how the main PNG file looks when loaded by the website (green added by me for clarity):

But the viewer sees it displayed like below (with other PNG sprites overlaid):
The other sprites that get overlaid in the above image are actually (sections of) the PNG sprite-sheets such as:
- Reyna (girl left) : PNG sprites of the her arm's glowing (or electric) FX animation.
- Raze (girl right) : PNG sprites of her hand-grenade FX animation.
Between the before and after images and seeing the other PNG sprite sheets it becomes obvious how the effect is being achieved:

(1) Just align a sprite element with the correct position on the main image.
(2) Then cycle through the frames (where a "frame" is a selected small section of the larger PNG sprite sheet).

For the display/layout part...
- Just put the main image on a <div> then draw the smaller sprite elements onto a <canvas>. Note that a canvas can have a transparent background (showing the web page content underneath it).
- This canvas can also be positioned above the image layer by using z-index which sets the "layers" ordering of the in-page elements.
- You can use a For loop to "sample" the pixels from the sprites' PNG and draw those specific pixels into your canvas area at the expected position (aligns with main image).
Hopefully this info (and the tutorial search links) is enough to get you started. Good luck.