参考divまでに、問題のロゴを構成するものは次のとおりです。
<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>
<style>#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;}</style></noscript>
<div id="hplogo" onselectstart="return false;"
style="-webkit-transform: translate3d(0px, 0px, 0px);">
<a hidefocus="" id="verne-click"
href="/search?q=Jules+Verne&ct=verne-hp&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&&a.stopPropagation();else
h.event.cancelBubble=d},Ga=function(a,b){!b()&&a<
200&&h[o](function(){Ga(a+1,b)},a)},Ha=function(a){a=a||h.event;return[(a.clientX||a[m]&&a[m][0].clientX||0)+(j.body.scrollLeft||j.documentElement.scrollLeft),(a.clientY||a[m]&&a[m][0].clientY||0)+(j.body.scrollTop||j.documentElement.scrollTop)]},Ja=function(a){(a=a||h.event)&&!a.toElement&&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>=40&&c<=
114&&e>=25&&e<=
119){R.className="drag-active";E=d;ja=(new
Date)[n]();if(c>=92&&c<=
112&&e>=37&&e<=
57){la=c-60-17;ma=e-45-27}else
ma=la=0;Ka(a);La("m");b&&a.preventDefault()}},Ia=function(){U=(new
Date)[n]()-ja>500?0.1:0.01;X(0);R.className="";E=g},Ka=function(a){Z();if(E&&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<
60){c=3;e=1;f=-a}else
if(a>94){c=4;e=1;f=a}else if(b<
45){z=y=1;Y=-b}else
if(b>99){y=2;z=1;Y=b}else{a=(a-60-17)/34;b=(b-45-27)/54;if(b>-0.2&&b<
0.2)if(a<
0){c=3;e=-a*2}else{c=4;e=a*2}if(a>-0.2&&a<
0.2)if(b<
0){y=1;z=-b*2}else{y=2;z=b*2}}if(c!=0&&y!=0)if(Y>f){C=y;D=z}else
if(Y< f){C=c;D=e}else
if(Math.abs(z)>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&&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>5){f=(N-5)/10;a=4}else
if(N<
-5){f=(-N-5)/10;a=3}if(Math.abs(O)>Math.abs(N))if(O>5){f=(O-5)/10;a=2}else
if(O<
-5){f=(-O-5)/10;a=1}if(f>1)f=1;if(f>0){Z();I=d;X(a,f)}}},Ta=function(){I=d;t+=3},X=function(a,b){if(b){if(b>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>0.5)f=117;else
if(t>0){a=i.doodle.mod(t,1);if(a<
0.25||a>=0.5&&a<
0.75)f=39;else
if(a>=0.25&&a<
0.5)f=78}c=-15*b;break;case
4:if(b>0.5)f=156;c=12*b;break;case
1:if(b>ha)f=195;else
if(b>ga)f=234;e=-23*b;break;case
2:if(b>ha)f=273;else
if(b>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< 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&&!I&&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<=
106)B=0.2;else
if(x>=129){c=g;B=-0.2}else
if(x>=112)B=-0.2}if(u< 0)u=0;else
if(u>186)u=186;else if(u<
5&&w<
0||u>181&&w>0){w=0;a=g}if(x<
104)B=4;else if(x>1218)x=1218;else
if(x>1218-40.5*A&&B>0){B=0;a=g}if(B>A){A+=a?0.2:0.05;if(A>B)A=B}else
if(B< A){A-=a?0.2:0.05;if(A<
B)A=B}if(w>v){v+=0.05;if(v>w)v=w}else
if(w< v){v-=0.05;if(v<
w)v=w}if(w==0&&v>=-0.05&&v<=
0.05)v=0;u+=v;x+=A;Ua();if(t>0){t-=0.1;$()}if(s>ia){s-=U;$()}if(s<=
U){s=r=0;$()}if(b&&c){G++;G>fa&&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< 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>50,b=0;b<
4;b++){var
c=j[l]("verne-layer"+b+"-img");if(!c)return;if(a&&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<
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&&!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&&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=[^&]/.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>
ロゴを強化するJavaScriptは、埋め込まれたスクリプト要素にあります。しかし、あなたがそれからどれだけ学ぶかはわかりません。圧縮されています。
