He estado tratando de descubrir cómo Google anima sus logotipos desde la explosión de partículas hace un tiempo, y hoy tienen a chemistry set para celebrar el 200 aniversario de Robert Bunsen.¿Cómo anima Google sus logotipos?
Supongo que esto es HTML5 (estoy usando Firefox 4, Chrome y Safari 5), pero ¿alguien puede confirmar si es así y si hay algún buen tutorial sobre cómo hacer esos tipos de animaciones?
Ésta es HTML5 PARCIALMENTE:
Recortan el área de una escena y la muestran. Para mostrar la siguiente escena, simplemente cambian el área de recorte al inicio del desplazamiento.
sólo comprobar con Firebug: la imagen se establece como fondo de la etiqueta div con heigth exactamente de una escena, a continuación, cambian Y-offset y de fondo "se mueve" - al igual que la cinta de película :)
Aquí es fragmento (Google (C)), -380px aviso y luego -570px:
<div style="background: url("/logos/2011/bunsen11-hp-sprite.png")
no-repeat scroll 0pt
-380px transparent; height: 190px; opacity: 0.3;
position: absolute; width: 465px; z-index: 20;"></div>
<div style="background: url("/logos/2011/bunsen11-hp-sprite.png")
no-repeat scroll 0pt
-570px transparent; height: 190px; opacity: 0.3;
position: absolute; width: 465px; z-index: 20;"></div>
Aquí es buen ejemplo de bricolaje de pila: How to show animated image from PNG image using javascript? [ like gmail ]
actualización: 2. también utilizan HTML5 puede vas a producir parte de la animación con efectos interactivos, burbujas, por ejemplo.
Esto es de firebug: – Yasser
Si elimina el elemento canvas en la página usando firebug, notará que la única animación que queda es mínima, simplemente cambia la transparencia de la imagen de fondo. – Yasser
Eso es genial, gracias por señalar eso. Pero ¿cómo consiguen que la llama bunsen se eleve y caiga y las burbujas se muevan rápidamente, etc., dependiendo de dónde se encuentre el cursor en la pantalla, seguramente es HTML 5, verdad? – Osu