How does today's (Jules Verne) Google's Doodle work?
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 it
-
For reference, here is the
divthat 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> <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>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.
讨论(0) -
This is the best I could do with making all of their code readable:
http://jsfiddle.net/Mutant_Tractor/jRkND/16/
讨论(0) -
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
!importantsdoesn't work - in Chrome and IE I see the default pointer when I drag.cursor: noneworks in Firefox 3.讨论(0)
加载中...
- 热议问题