How does Google Doodle work?

Question

When i search for it, i found following

Animated Gif
Animated Jpeg Frame. Sprite image will have all frames and this frame is animated using javascript.
Canvas

Which one is correct?

http://stackoverflow.com/questions/11907854/google-interactive-doodle/11908050 — Diode, Jun 12 '14 at 06:27

score 4 · Accepted Answer · answered Jun 12 '14 at 06:35

First they enclose the <img> tag JPEG with all the animation frames inside a <div> tag that has a fixed height of 182 pixels and which hides overflow. This creates a fixed window so to speak, which masks all but current animation frame. The image is animated using JavaScript, which changes the top property for the absolutely positioned image to slide it up a fixed interval with the setTimeout() function.

Here is some code of example by Google from one of reference:

<div style="height:182px;position:relative;width:468px;overflow:hidden">
    <img border="0" src="source.jpg" id="filmstrip" style="position: absolute; height: 2912px; top: -0px; display: block; ">
</div>

Jquery:

<script>

function naiveAnimation(id) {

    var img = document.getElementById(id);
    var offset = 0;
    var animate = function() {
        //slide the image correct frame of animation given by  offset
        img.style.top = -offset + "px";
        //calculate offset to next frame
        offset = Math.floor(offset + 182);
        //if we are not yet on the last frame...
        if(offset < 2912) {
            //call me again in half a second
            window.setTimeout(animate, 500);
        } else {
            //at last frame, so all done!
        }
    };
    //start the animation
    animate();
}

naiveAnimation('filmstrip');

</script>

You mean, Source.jpg will have all animation frame in a single image like sprite file? — Fizer Khan, Jun 12 '14 at 06:42
yes.. for reference you can visit this [LINK](http://zoompf.com/blog/2012/04/how-do-google-animated-doodles-work) here everything is explained very nicely. — Gagan Gami, Jun 12 '14 at 06:49

score 0 · Answer 2 · answered Jun 12 '14 at 06:23

I would go for the Animated JPEG and Canvas, although APNG may work too. I haven't seen a 256-bit color image on a doodle. Maybe even a webm. Some doodles have sound and some are interactive, so I think they use whatever they see suitable for their purposes.

How does Google Doodle work?

2 Answers2