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:#ffffca;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=k&&i;p.className=h?"visible":"";if(!u)p.style.visibili
ty=h?"visible":"hidden";var
a=j&&i;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>-10&&e>-10&&c< 431&&e<
167;if(k&&i)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.targetTouches&&a.targetTouches[0].clientX||0)
+(document.body.scrollLeft||document.documentElement.scrollLeft||0),(a.clien
tY||a.targetTouches&&a.targetTouches[0].clientY||0)+(document.body.scrollTop
||document.documentElement.scrollTop||0)];g||(g=window.setTimeout(A,30))},A=
function(){g=null;f&&z(f[0],f[1])},E=function(){k?(k=!1,j=!0,y()):google.nav
&&google.nav.go?google.nav.go("/search?q=V%C3%A4rldsutst%C3%A4llning&ct=worl
dsfair11-hp&oi=ddle"):window.location.href="/search?q=V%C3%A4rldsutst%C3%A4l
lning&ct=worldsfair11-hp&oi=ddle"},F=function(){k=!1;j=!0;y()},G=function(){
if(o=document.getElementById("hplogo")){var a=o,b=0;do
b+=a.offsetLeft;while(a=a.offsetParent);m=b;a=o;b=0;do
b+=a.offsetTop;while(a=a.offsetParent);n=b}},H=function(a){a.preventDefault(
);l=k=!0;B(a)},I=function(){k=!1;y()},J=function(){if(google.doodle.a)for(va
r
a;a=google.doodle.a.pop();)w.apply(null,a);g&&(window.clearTimeout(g),g=null
);k=!1;y()},K=function(a){return
document.getElementById(a).getElementsByTagName("div")[0]},L=function(){if(!
google.doodle.b)google.doodle.b=!0,google.dstr.push(J),google.rein.push(L);i
f(o=document.getElementById("hplogo")){p=document.getElementById("loupe");q=
K("loupe-canvas-top");r=K("loupe-canvas-mid");s=K("loupe-canvas-bottom");t=d
ocument.getElementById("hplogot");p.style.marginLeft="-100px";p.style.margin
Top="-100px";p.style.width="200px";p.style.height="200px";k=!0;j=!1;G();wind
ow.setTimeout(G,0);z(0,0);x(document,"mousemove",B);x(o,"touchstart",H);x(o,
"touchmove",B);x(document,"touchend",I);x(o,"mousedown",E);x(window,"resize"
,G);x(window,"load",G);x(document,"keydown",F);x(document.forms.f||document.
forms.gs||document.forms.c,"keydown",F);x(navigator.userAgent.indexOf("Firef
ox")>=0?window:document.body,"keydown",F);for(var a=0,b;b=d[a++];)if(typeof
p.style[b]!="undefined"){u=!0;p.style.visibility="visible";break}if(typeof
t.style.opacity!="undefined")v=!0,t.style.display="block"}};google.x?google.
x("DOODLE",L):L()}catch(M){google.ml(M,!1,{cause:"DOODLE"})};})();
</script>
</div>
Hope that answer some of your questions!
Cheers
Raul
-----Original Message-----
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Grant Bailey
Sent: sábado, 30 de abril de 2011 16:24
To: wsg@webstandardsgroup.org
Subject: [WSG] Today's Google home page (1 May)
Hello everyone,
Today's Google home page ('160th Anniversary of First World's Fair') has
a graphic that provides a 'magnifying glass' when you hover over it.
It's very impressive and I'm wondering what technologies Google has used
to render the magnification feature. Does anyone know? SVG, Flash, etc.?
Also: does the technology satisfy web usability guidelines?
I would be grateful for any responses.
Thank you and kind regards,
Grant Bailey
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
