Looking at it in Chrome it's two canvas elements (one for the animation, one for the shadow) with a noscript fallback:
<canvas id="calder" width="400" height="300" style="margin-left: -48px; z-index: 0; cursor: move; "></canvas> <canvas id="calder_shadows" width="400" height="300" style="margin-left:-48px;position:relative;top:-140px;z-index:-5"></canvas> <noscript>&lt;a href="/search?q=Alexander+Calder&amp;ct=calder11&amp;oi=ddle" title="Alexander Calder&amp;#39;s 113th Birthday. Courtesy of Calder Foundation / ARS, NY."&gt;&lt;img id="hplogo" src="/logos/2011/calder11.png" alt="Alexander Calder&amp;#39;s 113th Birthday. Courtesy of Calder Foundation / ARS, NY."&gt;&lt;/a&gt;</noscript> Trying to decipher the JavaScript that runs this is pretty hard, though... Chris -----Original Message----- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of grant_malcolm_bai...@westnet.com.au Sent: 22 July 2011 07:16 To: wsg@webstandardsgroup.org Subject: [WSG] Google 'Alexander Calder' theme Hello, Today's Google home page theme seems to be a very good example of progressive enhancement. The mobile graphic is non-interactive in IE7 but looks fine. In Chrome, however, the graphic swings about in response to mouse movements (as does its shadow, not present for IE7). Could anyone advise: (i) what technologies were used for this (canvas, etc.), and (ii) whether it is possible to save a working copy of the page locally in order to study its function (I've never had luck doing this with Google themes). Thank you and 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 *******************************************************************
