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 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:nonein 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 o开发者_StackOverflowther 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:
Link to other 3 images (They were so long that was not feasible to show here)
Big Fishes, shark
Giant Tail Under water fauna SkyUpdate
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
This is the best I could do with making all of their code readable:
http://jsfiddle.net/Mutant_Tractor/jRkND/16/
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.
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>
<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.
加载中,请稍侯......
精彩评论