¿Cómo funciona el Doodle de Google de hoy (Julio Verne)?

Question

Estoy seguro de que muchos de ustedes ya han revisado el día de hoy (2011-02-08) Google's doodle (link to article on CNN if doodle changes). Fue increíble y traté de averiguar sobre su implementación en Firebug, algunas cosas que descubrí fue que tiene alrededor de 3 capas de imágenes (para efecto 3D) que son pan y giradas (-moz-transform:rotate()), etc. Lo que no hice t encontrado alrededor eran (y mis preguntas):

• Cómo se ocultó nuestra cursor del ratón cuando se mantiene en el mango, sé que es cursor:none en CSS, pero todavía me vio este CSS para el mango:

  #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; 
  } 
  

• cómo permitió el arrastre de la manija y el intercambio entre 9 imágenes de acuerdo ing al posicionamiento al mismo tiempo.

• arrojar alguna luz sobre su Javascript (No he encontrado una en Firebug ... solamente que el guión habitual para la búsqueda, y este pequeño código que acaba calcula mod (¿Qué hay de posible código de otras tareas)

  google.doodle.mod = function (a, n) {return a % n;}; 
  2 /* !eval(new String("google.doodle.mod = function(a,n);)) */ 
  

  .

Así que simplemente me señalar cómo su implementadas (que he mencionado 3, pero incluir otros puntos que podrían no ser tan obvio)

---

Image Recursos para la referencia:

Enlace a otros 3 imágenes (eran tan largas que no era posible mostrar aquí)

Big Fishes, shark
Giant Tail
Under water fauna
Sky

---

actualización

Myles Gray aquí ha hecho una gran contribución al volver a implementar (y hacerlo más legible) el código Javascript, CSS y HTML para mostrarnos cómo se implementó Doodle.

Aquí está el enlace para que todos ustedes se echa un vistazo:

http://jsfiddle.net/Mutant_Tractor/jRkND/16/ < - última revisión

Answer 1

Esto es lo mejor que podía hacer con la fabricación de todo su código legible:

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

Answer 2

El CSS para el cursor estaba más arriba:

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

No muchos navegadores de apoyo ninguno aunque y el !importants múltiple no funciona: en Chrome e IE veo el puntero predeterminado cuando lo arrastro. cursor: none funciona en Firefox 3.

Answer 3

Como referencia, aquí está el div que compone el logotipo en cuestión:

<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> 

El código JavaScript que alimenta el logotipo es un elemento de secuencia de comandos incrustada.Sin embargo, no sé cuánto aprenderás de eso. Está comprimido.