How does today's (Jules Verne) Google's Doodle work?

Question

I am sure many of you have already checked on today's (2011-02-08) Google's doodle (link to article on CNN if doodle changes). It was awesome and I tried figuring out about its implementation in Firebug, some things I found out was that it has about 3 layers of images (for 3D effect) which are pan and rotated (-moz-transform:rotate()), etc. What I didn't found about were (and my questions):

How it hid our mouse cursor when you hold on the handle, I know it's cursor:none in CSS but I still saw this CSS for the handle:

#verne-drag {
    background: url("logos/2011/verne-hp.png") no-repeat scroll 1000px 1000px transparent;
    cursor: pointer;/*here its pointer not none*/
    height: 150px;
    left: 565px;
    position: absolute;
    top: 15px;
    width: 150px;
    z-index: 700;
}

How it allowed dragging of handle so and swapping between 9 images according to position at the same time.
Shed some light on its Javascript (I didn't find one in firebug...only that usual script for search, and this little code which just calculates mod (what about possible code other tasks)
```
google.doodle.mod = function (a, n) {return a % n;};
2 /* !eval(new String("google.doodle.mod = function(a,n);)) */
```

So simply point me out how its implemented (I have mentioned 3 but include other points which might not be that obvious).

Image Resources for reference:

The Sprite for resources

Link to other 3 images (They were so long that was not feasible to show here)

Big Fishes, shark
Giant Tail
Under water fauna
Sky

Update

Myles Gray here has made a great contribution by re-implementing (and making it more readable) the Javascript Code, CSS and HTML to show us how Doodle was implemented.

Here is the link for you all to check it out:

http://jsfiddle.net/Mutant_Tractor/jRkND/16/ <-- Latest Revision

@cherouvim i have no problem if it becomes community wiki.. but before it gets some real good answers.. — Shekhar_Pro, Feb 08 '11 at 13:43
Now all they need to do is turn it into a video feed from the server so us developers don't go tearing apart "how did they do it?". I think one day they will! — 700 Software, Feb 08 '11 at 14:41
@Daniel Hanly: Magic involves some spells and that what we are trying to figure out .. aren't we ;) — Shekhar_Pro, Feb 08 '11 at 15:34
What is the logic behind Community Wiki? Although I'm not fond of "What does this code do?" questions, this one should be objectively answerable. — Robert Harvey, Feb 08 '11 at 15:43
@Shekhar_Pro Google Magic is different, it's often likened to the Dark Arts... why do you think so many of their employees are bailing to Facebook - it's fear! — Dan Hanly, Feb 08 '11 at 16:12
@Robert Harvey: The point is that whenever google does something cool someone in SO will immediatelly ask "how does it work?" and will simply grab +50 upvotes. — cherouvim, Feb 09 '11 at 08:01
Related: (Slightly different question, but related answer) http://programmers.stackexchange.com/questions/45685/which-language-did-google-use-to-build-todays-feb-8th-2011-jules-verne-interac/45695#45695 — Orbling, Feb 09 '11 at 09:20
@cherouvim: to be clear neither i asked it immediately (i first tried to figure it out myself), nor all those 25+ votes gave me any points (i already had 100 and after 20 (20x5 = 100pts) votes i crossed my daily rep cap.. you can check that in my rep graph) — Shekhar_Pro, Feb 09 '11 at 10:10
@Shekhar_Pro: I agree. It shows that you did research and I did not mean to offend you. I was just explaining the general trend about these sort of questions. Anyway... no big deal. — cherouvim, Feb 09 '11 at 10:40
@cherouvim: no problem.. i am cool... just thought should clarify things... — Shekhar_Pro, Feb 09 '11 at 10:46

Myles Gray · Accepted Answer · 2011-02-09T13:41:57.327

27

This is the best I could do with making all of their code readable:

http://jsfiddle.net/Mutant_Tractor/jRkND/16/

edited Feb 09 '11 at 13:41

answered Feb 08 '11 at 15:00

Myles Gray

8,711
7
48
70

1

I'm updating all the time so keep watching it. – Myles Gray Feb 08 '11 at 15:15
If you save the images to some place like imgur then you won't have to worry about Google deleting the interactivity. (although I tend to think they will preserve it, I am not certain) The Google Dots Logo and Google Grey Logo are pretty much only locatable on news results. – 700 Software Feb 08 '11 at 22:33
@GeorgeBailey - all of them moved to private hosting now, Except for the main BG, which for some reason isn't transparent on private hosting? – Myles Gray Feb 08 '11 at 22:54
@Myles Gray **Bravo** man you did it.. sorry :( i saw you implementation little late..But now that's what we call an pure real answer.. now any one can go through "clean" code and figure out things. Thanx a lot once again. – Shekhar_Pro Feb 09 '11 at 10:49
1

@Shekhar_Pro - Thanks man I appreciate it, took about 2/3 hours of figuring but I got there in the end, I'm pretty sure the code in there is all critical to the logo ONLY, I will try and reverse engineer it later, a lot of it is for accelerometers in phones and macs so that can be chucked out, what do you want to know just how to control it with the stick? – Myles Gray Feb 09 '11 at 13:10
yeah the functioning of handle.. actually my second point in the question :) – Shekhar_Pro Feb 09 '11 at 13:17
And what do you know! This logo is not to be found in [their logo archives](http://www.google.com/logos/). Glad it is preserved! – 700 Software Feb 09 '11 at 14:12
6

This logo can be found in the Google logo archives at http://www.google.com/logos/verne.html – Alpine Feb 21 '11 at 14:58
2

@George It can be found in the archive now. And here's a HD version: http://www.google.com/logos/verne_hd.html – alexia Mar 08 '11 at 20:18
@Nyuszika7H that doesn't have accelerometer control anymore :( – Myles Gray Mar 08 '11 at 20:21

score 6 · Answer 2 · answered Feb 08 '11 at 14:01

6

The CSS for the cursor was higher up:

#hplogo.drag-active #verne-drag, #hplogo.drag-active #verne-drag * {
  cursor:move !important;
  cursor:none !important;
}

Not many browsers support the none though and the multiple !importants doesn't work - in Chrome and IE I see the default pointer when I drag. cursor: none works in Firefox 3.

answered Feb 08 '11 at 14:01

tordal

644
5
17

8

strange that it doesn't work in Chrome (the pointer I mean), usually Google designs these things for Chrome and you see everyone else struggling to view it properly. – Dan Hanly Feb 08 '11 at 14:40
1

Super strange. I triple-checked that Chrome was up-to-date this morning, but even the latest Beta doesn't display it right. – tordal Feb 08 '11 at 15:22
1

I know this largely subjective but it appears to work for me, the cursor hides when I click the gear stick and shift it around. Running Chrome Mac 9.0.597.84 – Diziet Feb 08 '11 at 18:26

score 0 · Answer 3 · answered Feb 08 '11 at 14:15

For reference, here is the div that makes up the logo in question:

<div id="lga">
  <style>
  #hplogo{height:190px;margin-top:-5px;overflow:hidden;position:relative;width:714px;}#hplogo,
  #hplogo
  *{-webkit-user-select:none;-moz-user-select:none;user-select:none;}#hplogo.drag-active
  #verne-drag,#hplogo.drag-active #verne-drag *{cursor:move
  !important;cursor:none
  !important;}#verne-chrome{height:190px;left:0;position:absolute;top:0;width:714px;z-index:400;}#verne-chrome-img{width:714px;height:229px;}#verne-layers{height:230px;left:0;top:-20px;overflow:hidden;position:absolute;width:714px;}#verne-layers
  img{opacity:0;}#verne-layer-0,#verne-layer-1,#verne-layer-2,#verne-layer-3{height:1388px;left:1px;position:absolute;top:1px;margin-top:20px;width:714px;}#verne-layer-0{z-index:300;}#verne-layer-1{z-index:200;}#verne-layer-2{z-index:100;}#verne-layer-3{z-index:50;background:white;}#verne-lever{background:url(logos/2011/verne-hp.png)
  no-repeat 0
  -190px;height:39px;left:639px;position:absolute;top:49px;width:39px;z-index:500;transition:transform
  .1s linear, top .1s linear, left .1s
  linear;-moz-transition:-moz-transform .1s linear, top .1s linear,
  left .1s linear;-webkit-transition:-webkit-transform .1s linear,
  top .1s linear, left .1s linear;-o-transition:-o-transform .1s
  linear, top .1s linear, left .1s
  linear;}#verne-drag{background:url(logos/2011/verne-hp.png)
  no-repeat 1000px
  1000px;cursor:pointer;height:150px;left:565px;position:absolute;top:15px;width:150px;z-index:700;}#verne-dials-click{background:url(logos/2011/verne-hp.png)
  no-repeat 1000px
  1000px;height:190px;left:0;position:absolute;top:0px;width:100px;z-index:700;-webkit-tap-highlight-color:transparent;}#verne-click{background:url(logos/2011/verne-hp.png)
  no-repeat 1000px
  1000px;cursor:pointer;height:190px;left:100px;position:absolute;top:0px;width:465px;z-index:700;}#verne-dial-depth-big,#verne-dial-depth-small,#verne-dial-position{position:absolute;width:7px;transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transition:transform
  .2s linear;-moz-transition:-moz-transform .2s
  linear;-webkit-transition:-webkit-transform .2s
  linear;-o-transition:-webkit-transform .2s
  linear;}#verne-dial-depth-big{background:url(logos/2011/verne-hp.png)
  no-repeat -351px
  -199px;height:15px;left:48px;top:62px;z-index:600;transform-origin:3px
  12px;-moz-transform-origin:3px 12px;-webkit-transform-origin:3px
  12px;-o-transform-origin:3px
  12px;}#verne-dial-depth-small{background:url(logos/2011/verne-hp.png)
  no-repeat -351px
  -215px;height:15px;left:48px;top:62px;z-index:620;transform-origin:3px
  12px;-moz-transform-origin:3px 12px;-webkit-transform-origin:3px
  12px;-o-transform-origin:3px
  12px;}#verne-dial-position{background:url(logos/2011/verne-hp.png)
  no-repeat -351px
  -190px;height:8px;left:59px;top:110px;z-index:600;transform-origin:4px
  8px;-moz-transform-origin:4px 8px;-webkit-transform-origin:4px
  8px;-o-transform-origin:4px 8px;}#verne-border{border:1px solid
  white;cursor:pointer;height:188px;left:0;position:absolute;top:0;width:712px;z-index:650;}</style>
  <noscript>
  &lt;style&gt;#verne-chrome{background:url(logos/2011/verne-hp.jpg)
  no-repeat;left:100px;}#verne-lever,#verne-dial-depth-big,#verne-dial-depth-small,#verne-dial-position,#verne-dial-position{display:none;}&lt;/style&gt;</noscript>
  <div id="hplogo" onselectstart="return false;"
  style="-webkit-transform: translate3d(0px, 0px, 0px);">
    <a hidefocus="" id="verne-click"
    href="/search?q=Jules+Verne&amp;ct=verne-hp&amp;oi=ddle"></a>
    <div id="verne-dials-click"></div>
    <div id="verne-drag"></div>
    <div id="verne-lever"
    style="-webkit-transform: translate(0px, 0px); background-position: 0px -190px;">
    </div>
    <div id="verne-chrome">
      <img id="verne-chrome-img" src="logos/2011/verne-hp.png">
        <div id="verne-layers"
        style="-webkit-transform: rotate(0deg);">
          <div id="verne-layer-0"
          style="-webkit-transition-property: -webkit-transform, top; -webkit-transition-duration: 0.2s, 0.2s; -webkit-transition-timing-function: linear, linear; -webkit-transition-delay: initial, initial; -webkit-transform: translate3d(-28px, -385.5499999999999px, 0px);">

            <img src="logos/2011/verne-hp-1.png"
            id="verne-layer0-img"
            style="-webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -webkit-transition-delay: initial; opacity: 1;">

              <div id="verne-layer-1"
              style="-webkit-transition-property: -webkit-transform, top; -webkit-transition-duration: 0.2s, 0.2s; -webkit-transition-timing-function: linear, linear; -webkit-transition-delay: initial, initial; -webkit-transform: translate3d(-28px, -350.3175299999999px, 0px);">

                <img src="logos/2011/verne-hp-2.png"
                id="verne-layer1-img"
                style="-webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -webkit-transition-delay: initial; opacity: 1;">

                  <div id="verne-layer-2"
                  style="-webkit-transition-property: -webkit-transform, top; -webkit-transition-duration: 0.2s, 0.2s; -webkit-transition-timing-function: linear, linear; -webkit-transition-delay: initial, initial; -webkit-transform: translate3d(-28px, -314.3936849999999px, 0px);">

                    <img src="logos/2011/verne-hp-3.png"
                    id="verne-layer2-img"
                    style="-webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -webkit-transition-delay: initial; opacity: 1;">

                      <div id="verne-layer-3"
                      style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(185, 229, 231); -webkit-transition-property: -webkit-transform, top; -webkit-transition-duration: 0.2s, 0.2s; -webkit-transition-timing-function: linear, linear; -webkit-transition-delay: initial, initial; -webkit-transform: translate3d(-28px, -247.27499999999995px, 0px); background-position: initial initial; background-repeat: initial initial;">

                        <img src="logos/2011/verne-hp-4.png"
                        id="verne-layer3-img"
                        style="-webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -webkit-transition-delay: initial; opacity: 1;">

                          <div id="verne-dial-depth-big"
                          style="-webkit-transform: rotate(1542.1999999999996deg);">
                          </div>
                          <div id="verne-dial-depth-small"
                          style="-webkit-transform: rotate(96.38749999999997deg);">
                          </div>
                          <div id="verne-dial-position"
                          style="-webkit-transform: rotate(3deg);">
                          </div>
                          <div id="verne-border"></div>
                          <script>(function(){var
                          d=true,g=false,h=window,i=google,j=document,k="push",l="getElementById",m="targetTouches",n="getTime",o="setTimeout",p="style";try{if(!i.doodle)i.doodle={};if(!i.doodle.a)i.doodle.a=[];var
                          q=navigator.userAgent.indexOf("MSIE")!=-1,aa=["webkitTransform","MozTransform","OTransform","transform"],ba=["webkitTransition","MozTransition","OTransition","transition"],ca={37:3,38:1,39:4,40:2},da=["logos/2011/verne-hp.png","logos/2011/verne-hp-1.png","logos/2011/verne-hp-2.png","logos/2011/verne-hp-3.png","logos/2011/verne-hp-4.png"],ea=[1,0.8726,0.7427,0.5],fa=1E4/66,ga=1/3,ha=2/3,r=0,s=0,t=0,ia=0,u=93,v=0,w=0,x=119,A=0,B=0,E=g,ja,ka=g,la=0,ma=0,na=0,oa=0,pa=d,qa=0,F=g,G=0,H=0,ra=g,sa,I=g,J=g,ta=0,ua=g,va,K=0,L=0,M=10,N=0,O=0,wa=0,P="",xa="",ya=g,Q=g,za=g,R,Aa,S,Ba,Ca,Da,T,Ea,U=0.2,V=function(a,b,c){if(!i.doodle.d)i.doodle.d=[];i.doodle.d[k](arguments);a.addEventListener?a.addEventListener(b,c,g):a.attachEvent("on"+b,c)};eval("google.doodle.mod
                          = function(a,n){return
                          a"+"%%".charAt(0)+"n;}");var
                          Fa=function(a){if(a)a.stopPropagation&amp;&amp;a.stopPropagation();else
                          h.event.cancelBubble=d},Ga=function(a,b){!b()&amp;&amp;a&lt;
                          200&amp;&amp;h[o](function(){Ga(a+1,b)},a)},Ha=function(a){a=a||h.event;return[(a.clientX||a[m]&amp;&amp;a[m][0].clientX||0)+(j.body.scrollLeft||j.documentElement.scrollLeft),(a.clientY||a[m]&amp;&amp;a[m][0].clientY||0)+(j.body.scrollTop||j.documentElement.scrollTop)]},Ja=function(a){(a=a||h.event)&amp;&amp;!a.toElement&amp;&amp;Ia(a)},Ma=function(a,b){I=d;W();var
                          c=Ea=j[l]("verne-drag"),e=0;do
                          e+=c.offsetLeft;while(c=c.offsetParent);na=e;c=Ea;e=0;do
                          e+=c.offsetTop;while(c=c.offsetParent);oa=e;e=Ha(a);c=e[0]-na;e=e[1]-oa;if(c&gt;=40&amp;&amp;c&lt;=
                          114&amp;&amp;e&gt;=25&amp;&amp;e&lt;=
                          119){R.className="drag-active";E=d;ja=(new
                          Date)[n]();if(c&gt;=92&amp;&amp;c&lt;=
                          112&amp;&amp;e&gt;=37&amp;&amp;e&lt;=
                          57){la=c-60-17;ma=e-45-27}else
                          ma=la=0;Ka(a);La("m");b&amp;&amp;a.preventDefault()}},Ia=function(){U=(new
                          Date)[n]()-ja&gt;500?0.1:0.01;X(0);R.className="";E=g},Ka=function(a){Z();if(E&amp;&amp;pa){pa=g;h[o](function(){pa=d},25);W();var
                          b=Ha(a);a=b[0]-na-la;b=b[1]-oa-ma;var
                          c=0,e=0,f=0,y=0,z=0,Y=0,C=0,D=0;if(a&lt;
                          60){c=3;e=1;f=-a}else
                          if(a&gt;94){c=4;e=1;f=a}else if(b&lt;
                          45){z=y=1;Y=-b}else
                          if(b&gt;99){y=2;z=1;Y=b}else{a=(a-60-17)/34;b=(b-45-27)/54;if(b&gt;-0.2&amp;&amp;b&lt;
                          0.2)if(a&lt;
                          0){c=3;e=-a*2}else{c=4;e=a*2}if(a&gt;-0.2&amp;&amp;a&lt;
                          0.2)if(b&lt;
                          0){y=1;z=-b*2}else{y=2;z=b*2}}if(c!=0&amp;&amp;y!=0)if(Y&gt;f){C=y;D=z}else
                          if(Y&lt; f){C=c;D=e}else
                          if(Math.abs(z)&gt;Math.abs(e)){C=y;D=z}else{C=c;D=e}else
                          if(c!=0){C=c;D=e}else{C=y;D=z}X(C,D)}},Na=function(a){if(i.log){i.log("verne",a);ra=d}},La=function(a){if(!ra)if(H){h.clearTimeout(H);H=0;Na(a)}else
                          H=h[o](Oa,250)},Oa=function(){H=0;if(ka)Na("k");else
                          E&amp;&amp;Na("m")},Pa=function(a){Z();I=d;W();var
                          b=ca[a.keyCode];if(b){X(b,1);La("k");ka=d}Fa(a)},Qa=function(a){Z();if(ca[a.keyCode]){U=0.2;X(0);ka=g}Fa(a)},Ra=function(){Z()},W=function(){M=10;L=K=0},Sa=function(a){var
                          b=h.orientation;if(b!=wa){wa=b;W()}var
                          c=a.accelerationIncludingGravity;if(c)switch(b){case
                          90:var e=-c.y,f=c.z;break;case
                          -90:e=c.y;f=c.z;break;case
                          180:e=-c.x;f=c.z;break;default:e=c.x;f=c.z}b=a.gamma||a.x*57||e*2;a=a.beta||a.y*57||f*2;if(M){K+=b;L+=a;M--;if(M==0){K/=10;L/=10}}else{N=b-K;O=a-L;f=a=0;if(N&gt;5){f=(N-5)/10;a=4}else
                          if(N&lt;
                          -5){f=(-N-5)/10;a=3}if(Math.abs(O)&gt;Math.abs(N))if(O&gt;5){f=(O-5)/10;a=2}else
                          if(O&lt;
                          -5){f=(-O-5)/10;a=1}if(f&gt;1)f=1;if(f&gt;0){Z();I=d;X(a,f)}}},Ta=function(){I=d;t+=3},X=function(a,b){if(b){if(b&gt;1)b=1}else
                          b=0;if(a==0)ia=0;else{r=a;ia=s=b}$()},$=function(){var
                          a=r,b=s;if(a==0){a=3;b=0}var
                          c=0,e=0,f=0;switch(a){case
                          3:if(b&gt;0.5)f=117;else
                          if(t&gt;0){a=i.doodle.mod(t,1);if(a&lt;
                          0.25||a&gt;=0.5&amp;&amp;a&lt;
                          0.75)f=39;else
                          if(a&gt;=0.25&amp;&amp;a&lt;
                          0.5)f=78}c=-15*b;break;case
                          4:if(b&gt;0.5)f=156;c=12*b;break;case
                          1:if(b&gt;ha)f=195;else
                          if(b&gt;ga)f=234;e=-23*b;break;case
                          2:if(b&gt;ha)f=273;else
                          if(b&gt;ga)f=312;e=26*b}if(Q)T[p][P]="translate("+c+"px,
                          "+e+"px)";else{T[p].left=c+639+"px";T[p].top=e+49+"px"}T[p].backgroundPosition=-f+"px
                          -190px"},Ua=function(){for(var
                          a=-(u+-65),b=0;b&lt; 4;b++){var
                          c=-((x-109)*ea[b]+109);if(Q)S[b][p][P]=ya?"translate3d("+a+"px,
                          "+c+"px, 0)":"translate("+a+"px,
                          "+c+"px)";else{S[b][p].left=a+"px";S[b][p].top=c+"px"}}if(Q){Aa[p][P]="rotate("+-v*5+"deg)";Ba[p][P]="rotate("+x*4+"deg)";Ca[p][P]="rotate("+x*4/16+"deg)";Da[p][P]="rotate("+(u-90)+"deg)"}},Wa=function(){if(ua){J&amp;&amp;!I&amp;&amp;X(2,0.5);var
                          a=r!=0,b=g,c=g;if(r==3)w=-2*s;else
                          if(r==4)w=2*s;else{w=0;b=d}if(r==2)B=4*s;else
                          if(r==1)B=-5*s;else{c=d;if(x&lt;=
                          106)B=0.2;else
                          if(x&gt;=129){c=g;B=-0.2}else
                          if(x&gt;=112)B=-0.2}if(u&lt; 0)u=0;else
                          if(u&gt;186)u=186;else if(u&lt;
                          5&amp;&amp;w&lt;
                          0||u&gt;181&amp;&amp;w&gt;0){w=0;a=g}if(x&lt;
                          104)B=4;else if(x&gt;1218)x=1218;else
                          if(x&gt;1218-40.5*A&amp;&amp;B&gt;0){B=0;a=g}if(B&gt;A){A+=a?0.2:0.05;if(A&gt;B)A=B}else
                          if(B&lt; A){A-=a?0.2:0.05;if(A&lt;
                          B)A=B}if(w&gt;v){v+=0.05;if(v&gt;w)v=w}else
                          if(w&lt; v){v-=0.05;if(v&lt;
                          w)v=w}if(w==0&amp;&amp;v&gt;=-0.05&amp;&amp;v&lt;=
                          0.05)v=0;u+=v;x+=A;Ua();if(t&gt;0){t-=0.1;$()}if(s&gt;ia){s-=U;$()}if(s&lt;=
                          U){s=r=0;$()}if(b&amp;&amp;c){G++;G&gt;fa&amp;&amp;Va()}else
                          G=0}},Ya=function(){va=(new
                          Date)[n]();if(j[l]("verne-chrome-img"))Xa();else{var
                          a=j.createElement("img");V(a,"load",Xa);a.id="verne-chrome-img";a.src=da[0];j[l]("verne-chrome").appendChild(a)}},Xa=function(){S[3][p].background="#b9e5e7";for(var
                          a=0;a&lt; 4;a++){var
                          b="verne-layer"+a+"-img";if(!j[l](b)){ta++;var
                          c=j.createElement("img");V(c,"load",Za);c.src=da[a+1];c.id=b;S[a].appendChild(c)}}$a()},Za=function(){ta--;$a()},$a=function(){if(ta==0){for(var
                          a=(new Date)[n]()-va&gt;50,b=0;b&lt;
                          4;b++){var
                          c=j[l]("verne-layer"+b+"-img");if(!c)return;if(a&amp;&amp;za)c[p][xa]="opacity
                          1s
                          ease-out";c[p].opacity=1}ua=d;h[o](ab,3E3);h[o](bb,6E3)}},cb=function(){for(var
                          a=0,b;b=aa[a++];)if(typeof
                          R[p][b]!="undefined"){Q=d;P=b;R[p][b]="translate3d(0,
                          0,
                          0)";ya=R[p][b]!="";break}for(a=0;b=ba[a++];)if(typeof
                          R[p][b]!="undefined"){za=d;xa=b;break}},db=function(){if(za)for(var
                          a=0;a&lt;
                          4;a++)j[l]("verne-layer-"+a)[p][xa]="-webkit-transform
                          .2s linear, top .2s
                          linear"},Z=function(){if(!F){F=d;qa=h.setInterval(Wa,66);G=0}},Va=function(){if(F){F=g;h.clearInterval(qa)}},ab=function(){I||(t+=3)},bb=function(){if(!I){J=d;sa=h[o](eb,9E3)}},eb=function(){if(J&amp;&amp;!I){J=g;h.clearTimeout(sa);X(0)}},fb=function(){var
                          a=j.forms.f||j.forms.gs||j.forms.tsf;if(a){V(a.q,"keydown",Pa);V(a.q,"keyup",Qa)}V(j,"keydown",Pa);V(j,"keyup",Qa);V(j,"mousedown",function(b){Ma(b,g)});V(j,"mousemove",Ka);V(j,"mouseup",Ia);q&amp;&amp;V(j.body,"mouseout",Ja);V(j,"touchstart",function(b){Ma(b,d)});V(j,"touchmove",Ka);V(j,"touchend",Ia);V(j,q?"focusin":"focus",Ra);V(h,"deviceorientation",Sa);V(h,"MozOrientation",Sa);V(h,"devicemotion",Sa);V(j[l]("verne-dials-click"),"click",Ta);for(i.doodle.c=g;a=i.doodle.a.shift();)a()},gb=function(){if(i.doodle.c)i.doodle.a[k](gb);else{for(var
                          a;a=i.doodle.d.pop();){var
                          b=a[0],c=a[1];a=a[2];b.removeEventListener?b.removeEventListener(c,a,g):b.detachEvent("on"+c,a)}Va();eb()}},hb=function(){if(i.dstr){if(!i.doodle.e){i.doodle.e=d;i.dstr[k](gb)}return
                          d}return
                          g},ib=function(){h[o](function(){Ga(100,hb)},0);if(!/#.*q=[^&amp;]/.test(h.location.href))if(i.doodle.c)i.doodle.a[k](ib);else{i.doodle.c=d;R=j[l]("hplogo");Aa=j[l]("verne-layers");S=[j[l]("verne-layer-0"),j[l]("verne-layer-1"),j[l]("verne-layer-2"),j[l]("verne-layer-3")];Ba=j[l]("verne-dial-depth-big");Ca=j[l]("verne-dial-depth-small");Da=j[l]("verne-dial-position");T=j[l]("verne-lever");Ea=j[l]("verne-drag");Ya();h[o](fb,0);cb();X(0);Ua();h[o](db,0);h[o](Z,0);if(q)try{j.execCommand("BackgroundImageCache",g,d)}catch(a){}}};ib()}catch(jb){i.ml(jb,g,{cause:"DOODLE"})};})();</script>
                        </img>
                      </div>
                    </img>
                  </div>
                </img>
              </div>
            </img>
          </div>
        </div>
      </img>
    </div>
  </div>
</div>

The JavaScript that powers the logo is in an embedded script element. I don't know how much you will learn from it, though. It is compressed.

A lot of this code you would need to ignore anyhow because it's mobile accellerometer enabled, you can just tilt and move the Nautilus: http://searchengineland.com/googles-jules-verne-logo-powered-by-css3-accelerometers-63995 — Dan Hanly, Feb 08 '11 at 14:50
+1 for "accellerometer " i didn't knew about this behavior on mobiles.. thanx ;) — Shekhar_Pro, Feb 08 '11 at 15:07

How does today's (Jules Verne) Google's Doodle work?

3 Answers3

Linked