Felicidades Isaac

04 Jan 2010

Para celebrar el cumpleaños de Sir Isaac Newton, Google ha incluido un logo que tiene ramas y unas manzanas. A los 2 segundos de haber cargado la página, una manzana se cae de la rama… Una idea muy bonita, y con un código minimalista. No sé si Google usará alguna suerte de compresor de código (de otros o propio) pero la verdad es que queda bonito:

setTimeout(function(){var h=0,v=1,f=document.getElementById('fall'),i=setInterval(function(){if(f){var r=parseInt(f.style.right)+h,b=parseInt(f.style.bottom)-v;f.style.right=r+'px';f.style.bottom=b+'px';if(b>-210){v+=2}else{h=(v>9)?v*0.1:0;v*=(v>9)?-0.3:0}}},25);google.rein&&google.rein.push(function(){clearInterval(i);h=0;v=1})},2000)

Que podríamos desenredar como:
setTimeout(<br /> function(){<br /> var h=0<br /> v=1<br /> f=document.getElementById('fall')<br /> i=setInterval(<br /> function(){<br /> if(f){<br /> var r=parseInt(f.style.right)+h<br /> b=parseInt(f.style.bottom)-v<br /> f.style.right=r+'px';<br /> f.style.bottom=b+'px';<br /> if(b>-210){<br /> v+=2<br /> }else{<br /> h=(v>9)?v*0.1:0;<br /> v*=(v>9)?-0.3:0<br /> }<br /> }<br /> }<br /> ,25);<br /> google.rein&#038;&#038;google.rein.push(<br /> function(){<br /> clearInterval(i);<br /> h=0;<br /> v=1<br /> }<br /> )<br /> }<br /> ,2000<br /> )

Que es una bonita y elegante forma de hacer esta animación junto con el rebote (v*=(v>9)?-0.3:0). Tengo curiosidad por saber qué hace google.rein.push y cual es el objetivo del objeto google.rein… ¿Alguna idea? Después de 10 minutos tirando del hilo no me ha quedado claro; y tengo mejores cosas que hacer hoy :)

Ah, Feliz Año 2010