Chris, Thanks for your response. Yes, some physics is involved behind the scenes I think ... Grant ----- Original Message ----- From: Chris Taylor <chris.tay...@cubik.co.uk> To: wsg@webstandardsgroup.org Sent: Fri, 22 Jul 2011 15:17:47 +0800 (WST) Subject: RE: [WSG] Google 'Alexander Calder' theme
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><a href="/search?q=Alexander+Calder&ct=calder11&oi=ddle" title="Alexander Calder&#39;s 113th Birthday. Courtesy of Calder Foundation / ARS, NY."><img id="hplogo" src="/logos/2011/calder11.png" alt="Alexander Calder&#39;s 113th Birthday. Courtesy of Calder Foundation / ARS, NY."></a></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 ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************
