On Apr 30, 2011, at 7:24 AM, Grant Bailey wrote:
> 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
Look likes a very clever simple hover effect with combination of absolute
positioning to me. Maybe with canvas too.
http://www.google.com/logos/2011/worldsfair11-hr.jpg
http://www.google.com/logos/2011/worldsfair11-hp-3.gif
It has a webkit animation fading and easing effect :)
<div id=hplogo><div id=loupe><div class=loupe-canvas
id=loupe-canvas-mid><div><img src="logos/2011/worldsfair11-hp-1.gif"
class=hplogoc><img src="logos/2011/worldsfair11-hp-2.gif" class=hplogod><img
src="logos/2011/worldsfair11-hp-3.gif" class=hplogof><img
src="logos/2011/worldsfair11-hp-4.gif" class=hplogos><img
src="logos/2011/worldsfair11-hr.jpg" class=hplogoh></div></div><div
class=loupe-canvas id="loupe-canvas-top"><div><img
src="logos/2011/worldsfair11-hp-1.gif" class=hplogoc><img
src="logos/2011/worldsfair11-hp-2.gif" class=hplogod><img
src="logos/2011/worldsfair11-hp-3.gif" class=hplogof><img
src="logos/2011/worldsfair11-hp-4.gif" class=hplogos><img
src="logos/2011/worldsfair11-hr.jpg" class=hplogoh></div></div><div
class=loupe-canvas id=loupe-canvas-bottom><div><img
src="logos/2011/worldsfair11-hp-1.gif" class=hplogoc><img
src="logos/2011/worldsfair11-hp-2.gif" class=hplogod><img
src="logos/2011/worldsfair11-hp-3.gif" class=hplogof><img
src="logos/2011/worldsfair11-hp-4.gif" class=hplogos><img
src="logos/2011/worldsfair11-hr.jpg" class=hplogoh></div></div><img
src="logos/2011/worldsfair11-hp.png"
style="height:200px;left:0;position:absolute;top:0;width:200px;z-index:6000"></div><div
id=hplogot>160th Anniversary of the First World's Fair</div></div>
> Also: does the technology satisfy web usability guidelines?
Code wise it seems so. IMHO, it's a presentational setup, therefore lack of
accessibility implementation doesn't seem to pose an issue.
tee
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
