Comment fonctionne aujourd'hui le Doodle de Google (Jules Verne)?

Question

Je suis sûr que beaucoup d'entre vous ont déjà coché sur aujourd'hui (2011-02-08) de Google doodle (lien vers l'article sur CNN si doodle changements). C'était génial et j'ai essayé de trouver sur sa mise en œuvre dans Firebug, certaines choses, j'ai trouvé qu'il a environ 3 couches d'images (effet 3D) qui sont de panoramique et de rotation (-moz-transform:rotate()), etc. Ce que je n'ai pas trouvé de sujet ont été (et mes questions):

• Comment elle a caché notre curseur de la souris lorsque vous maintenez le doigt sur la poignée, je sais que c'est cursor:none dans le CSS mais je ne voyais toujours cette CSS pour le manche:

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

• Comment il a permis le déplacement de poignée et d'échange entre les 9 images selon la position, dans le même temps.

• Faire la lumière sur son Javascript (je n'ai pas à en trouver un dans firebug...seulement que d'habitude script pour la recherche, et ce petit code qui vient de calcule mod (ce à propos de code possible d'autres tâches)

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

Donc tout simplement m'indiquer comment son œuvre (je l'ai mentionné 3 mais inclure d'autres points qui pourraient ne pas être évident).

---

L'Image des Ressources pour la référence:

Lien vers d'autres 3 images (Ils ont été si longtemps qui n'a pas été possible de montrer ici)

Gros Poissons, des requins
Queue Géante
Sous l'eau, de la faune
Ciel

---

Mise à jour

Myles Gris ici a fait une grande contribution à la re-mise en œuvre (et de le rendre plus lisible) le Code Javascript, CSS et HTML, pour nous montrer comment Doodle a été mis en œuvre.

Voici le lien pour vous tous de vérifier:

http://jsfiddle.net/Mutant_Tractor/jRkND/16/ <-- Dernière Révision

Answer 1

C’est le mieux que je puisse faire pour rendre l’ensemble de leur code lisible:

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

Answer 2

Le CSS pour le curseur était plus haut:

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

Cependant, peu de navigateurs prennent en charge l'option none et les multiples !importants ne fonctionnent pas - dans Chrome et IE, je vois le pointeur par défaut lorsque je fais glisser. cursor: none fonctionne dans Firefox 3.

Answer 3

Pour référence, voici le div qui compose le logo en 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="http://stackoverflow.com/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>
 

Le code JavaScript qui alimente le logo se trouve dans un élément de script incorporé. Je ne sais pas combien vous allez en apprendre, cependant. C'est compressé.