Dear Raul,
Many thanks for your reply.
Kind regards,
Grant Bailey
On 1/05/2011 9:21 PM, Raul Ferrer wrote:
Hi Grant!
This was a brilliant Google logo...as usual.
However, the technologies, though awesomely implemented, are not that new.
It's plain HTML for the structure, CSS for the display and effects and
Javascript for the interaction.
Oh, and the four animations that only show on the magnifying glass are plain
old animated .gifs (you gotta love this ;) )
This is the HTML code:
div id=lga style=height:171px;padding-top:22px
style
#hplogo{background:url(logos/2011/worldsfair11-hp.jpg) top left
no-repeat;cursor:pointer;height:168px;width:421px}#hplogot{-webkit-box-shado
w:5px 5px 10px #ddd;-moz-box-shadow:5px 5px 10px #ddd;box-shadow:5px 5px
10px #ddd;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity
0.5s ease-out;-o-transition:opacity 0.5s ease-out;transition:opacity 0.5s
ease-out;background-color:#ca;border:1px solid
#b5b5b5;display:none;font:normal 10pt arial,sans-serif;opacity:0;padding:1px
3px;position:absolute;white-space:nowrap}#loupe{-webkit-transform:scale(.25)
rotateZ(0);-moz-transform:scale(.25)
rotateZ(0);-webkit-transition-delay:200ms, 0;-moz-transition-delay:200ms,
0;-webkit-transition:opacity 400ms, -webkit-transform
400ms;-moz-transition:opacity 400ms, -moz-transform
400ms;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacit
y:0;overflow:hidden;position:absolute;visibility:hidden;z-index:2000}#loupe.
visible{-webkit-transform:scale(1) rotateZ(0);-moz-transform:scale(1)
rotateZ(0);-webkit-transition-delay:0, 100ms;-moz-transition-delay:0,
100ms;-webkit-transition:opacity 400ms, -webkit-transform
400ms;-moz-transition:opacity 400ms, -moz-transform
400ms;cursor:none;opacity:1}.loupe-canvas{background:white;overflow:hidden;p
osition:absolute;z-index:3000}.loupe-canvas
div{height:503px;left:0;position:absolute;top:0;width:1263px}.loupe-canvas
img{position:absolute}#loupe-canvas-top{height:19px;left:51px;top:22px;width
:100px}#loupe-canvas-mid{height:119px;left:23px;top:41px;width:155px}#loupe-
canvas-bottom{height:18px;left:51px;top:159px;width:100px}.hplogoh{height:50
3px;left:0;top:0;width:1263px;z-index:4000}.hplogoc{height:38px;left:440px;t
op:273px;width:38px;z-index:5000}.hplogod{height:48px;left:1108px;top:353px;
width:34px;z-index:5000}.hplogof{height:167px;left:519px;top:250px;width:132
px;z-index:5000}.hplogos{height:51px;left:122px;top:236px;width:51px;z-index
:5000}
/style
div id=hplogo
div id=loupe class= style=margin-left: -100px; margin-top: -100px;
width: 200px; height: 200px; visibility: visible; left: 372px; top: 177px;
div id=loupe-canvas-mid class=loupe-canvas
div style=left: 92px; top: -268px;
img class=hplogoc src=logos/2011/worldsfair11-hp-1.gif
img class=hplogod src=logos/2011/worldsfair11-hp-2.gif
img class=hplogof src=logos/2011/worldsfair11-hp-3.gif
img class=hplogos src=logos/2011/worldsfair11-hp-4.gif
img class=hplogoh src=logos/2011/worldsfair11-hr.jpg
/div
/div
div id=loupe-canvas-top class=loupe-canvas
div style=left: 64px; top: -249px;
img class=hplogoc src=logos/2011/worldsfair11-hp-1.gif
img class=hplogod src=logos/2011/worldsfair11-hp-2.gif
img class=hplogof src=logos/2011/worldsfair11-hp-3.gif
img class=hplogos src=logos/2011/worldsfair11-hp-4.gif
img class=hplogoh src=logos/2011/worldsfair11-hr.jpg
/div
/div
div id=loupe-canvas-bottom class=loupe-canvas
div style=left: 64px; top: -386px;
img class=hplogoc src=logos/2011/worldsfair11-hp-1.gif
img class=hplogod src=logos/2011/worldsfair11-hp-2.gif
img class=hplogof src=logos/2011/worldsfair11-hp-3.gif
img class=hplogos src=logos/2011/worldsfair11-hp-4.gif
img class=hplogoh src=logos/2011/worldsfair11-hr.jpg
/div
/div
img
style=height:200px;left:0;position:absolute;top:0;width:200px;z-index:6000
src=logos/2011/worldsfair11-hp.png
/div
div id=hplogot style=display: block; opacity: 0;160-årsjubileet av den
första Världsutställningen/div
/div
script
(function(){try{if(!google.doodle)google.doodle={};var
d=[webkitTransition,MozTransition,OTransition,transition],f,g=null,h
=!1,i=!1,j=!1,k=!0,l=!1,m,n,o,p,q,r,s,t,u=!1,v=!1,w=function(a,b,c){a.remove
EventListener?a.removeEventListener(b,c,!1):a.detachEvent(on+b,c)},x=funct
ion(a,b,c){if(!google.doodle.a)google.doodle.a=[];google.doodle.a.push(argum
ents);var
e=a,C=b,D=c;e.addEventListener?e.addEventListener(C,D,!1):e.attachEvent(on
+C,D)},y=function(){h=ki;p.className=h?visible:;if(!u)p.style.visibili
ty=h?visible:hidden;var
a=ji;if(a)t.style.left=m+289+px,t.style.top=n+10+px;v?t.style.opacity=
a?1:0:t.style.display=a?block:none},z=function(a,b){var
c=a-m,e=b-n;i=c-10e-10c 431e
167;if(ki)p.style.left=a-(l?100:0)+px,p.style.top=b+px,c=-(c*3-100),e=
-(e*3-100),r.style.left=c-23+px,r.style.top=e-41+px,q.style.left=c-51+p
x,q.style.top=e-22+px,s.style.left=c-51+px,s.style.top=e-159+px;y()},
B=function(a){f=[(a.clientX||a.targetTouchesa.targetTouches[0].clientX||0)
