Ответ 1
Это лучшее, что я мог сделать, чтобы сделать все их код читаемым:
Как работает сегодня (Jules Verne) Google Doodle?
Я уверен, что многие из вас уже проверили сегодня (2011-02-08) Google doodle (ссылка на статью о CNN, если изменения doodle). Это было потрясающе, и я попытался выяснить его реализацию в Firebug, некоторые вещи, о которых я узнал, состояли в том, что у него есть около трех слоев изображений (для 3D-эффекта), которые скопированы и повернуты (-moz-transform:rotate()) и т.д. Что я сделал, t были найдены (и мои вопросы):
-
Как он спрятал наш курсор мыши, когда вы держите дескриптор, я знаю его
cursor:noneв CSS, но я все еще видел этот CSS для дескриптора:#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; } -
Как это разрешить перетаскивание дескриптора так и поменять местами между 9 изображениями в соответствии с положением в то же время.
-
Пролить некоторый свет на свой Javascript (я не нашел его в firebug... только тот обычный script для поиска, и этот маленький код, который просто вычисляет мод (как насчет возможного кода других задач)
google.doodle.mod = function (a, n) {return a % n;}; 2 /* !eval(new String("google.doodle.mod = function(a,n);)) */
Итак, просто укажите мне, как это реализовано (я упомянул 3, но включил другие моменты, которые могут быть не так очевидны).
Ресурсы изображения для справки:
Ссылка на другие 3 изображения (они были настолько длинны, что было невозможно показать здесь)
Big Fishes, акула
Гигантский хвост
Под водной фауной
Sky
Обновление
Myles Gray здесь внес большой вклад, повторно внедряя (и делая его более читаемым) Javascript Code, CSS и HTML, чтобы показать нам, как Doodle был реализован.
Вот ссылка для вас, чтобы проверить:
http://jsfiddle.net/Mutant_Tractor/jRkND/16/ < - Последняя редакция
Ответы
Ответ 2
CSS для курсора был выше:
#hplogo.drag-active #verne-drag, #hplogo.drag-active #verne-drag * {
cursor:move !important;
cursor:none !important;
}
Не многие браузеры поддерживают ни один, хотя и несколько !importants не работают - в Chrome и IE я вижу указатель по умолчанию при перетаскивании. cursor: none работает в Firefox 3.
Ответ 3
Для справки, вот 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, который управляет логотипом, находится во встроенном элементе script. Я не знаю, как много вы будете учиться на этом. Он сжимается.