Duda con un codigo (manzana logo google)

Estoy_empezando · #1 (**permalink**) 04/01/2010, 06:13

Buenas, queria preguntarles una duda. Hoy, google ha hecho un homenaje a newton y puesto un codigo que cae una manzana desde el banner hasta abajo de la barra. DUDA: ¿Alguien sabe cual es el codigo que hace que caiga esa manzanita?

Saludos y gracias =D

hades87 · #2 (**permalink**) 04/01/2010, 06:22

yo creo que ha de ser un gif superpuesto a los demás elementos de la página web o incluso algo hecho con javascript. Puedes mirar el código con firebug

Y me atrevería a decir que el código que se usa es este:

<img src="/logos/newton10-tree.jpg" width="384" height="138" border="0" alt="Birthday of Sir Isaac Newton" title="Birthday of Sir Isaac Newton" id="logo" style="margin-top:-1.22em" onload="window.lol&&lol();setTimeout(funct ion(){var h=0,v=1,f=document.getElementById('fall'),i=setInt erval(function(){if(f){var r=parseInt(f.style.right)+h,b=parseInt(f.style.bot tom)-v;f.style.right=r+'px';f.style.bottom=b+'px';if(b& gt;-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)">

Estoy_empezando · #3 (**permalink**) 04/01/2010, 06:53

Hola , valoro tu esfuerzo por buscarme el codigo pero ese no es , supongo que será algo mas largo porque no menciona la parte de la imagen de la manzana :"apple.png"

Sin embargo ya lo he probado para confirmar y no funciona ...

Igualmente , Saludos y Gracias =D

hades87 · #4 (**permalink**) 04/01/2010, 08:47

Pero si te fijas coge el elemento con el id fall, que es el que dentro tiene la manzana suelta.

Estoy_empezando · #5 (**permalink**) 04/01/2010, 09:01

Pues a mi no me funciona ... Te pongo aqui el index y a ver si puedes arreglar algo ...

*Por supuesto , he hecho una carpeta llamada logos con las dos imagenes correspondientes.

No se cual será el fallo ... Igualmente , Saludos y Gracias =D

El resultado es este :

Código HTML:

Ver original<html>
<head><title> La web de Newton </title></head>
<body><img src="/logos/newton10-tree.jpg" width="384" height="138" border="0" alt="Birthday of Sir Isaac Newton" title="Birthday of Sir Isaac Newton" id="logo" style="margin-top:-1.22em" onload="window.lol&amp;&amp;lol();setTimeout(funct ion(){var h=0,v=1,f=document.getElementById('fall'),i=setInt erval(function(){if(f){var r=parseInt(f.style.right)+h,b=parseInt(f.style.bot tom)-v;f.style.right=r+'px';f.style.bottom=b+'px';if(b& gt;-210){v+=2}else{h=(v&gt;9)?v*0.1:0;v*=(v&gt;9)?-0.3:0}}},25);google.rein&amp;&amp;google.rein.push (function(){clearInterval(i);h=0;v=1})},2000)"></body>
</html>

hades87 · #6 (**permalink**) 04/01/2010, 09:12

Pues la verdad que no lo tengo muy claro, he empezado hace poco con javascript y seguramente en dicho foro te puedan ayudar más.

zerokilled · #7 (**permalink**) 04/01/2010, 09:39

primero, tengase en cuenta como has copiado el codigo. si las rutas son relativas, en tu pc local tambien son relativas. en este caso veo que la ruta comienza desde la raiz del servidor, pero al estar en local vendria siendo desde el disco duro. para evitar posibles problema, te recomiendo que sigas este proceso.

carga la pagina original.
guarda una copia de todos los documentos involucrados desde el menu Archivo > Guardar como... asegurate de escoger la opcion, "guardar la web completa". esto hara que tanto las imagenes como otro archivos asociado al documento se descarguen en una carpeta. en adicion, las rutas a los archivos son enlazadas con el contenido de la carpeta.
por utlimo, edita el codigo. ve descartando las partes que no estan involucrada y que te parecen obvias. por ejemplo, los elementos de formulario, alguna seccion del css, y otros posibles codigos javascript que no estan involucrados con el efecto.

eulerss · #8 (**permalink**) 04/01/2010, 09:57

vaya que a mi me surgio la misma duda al momento de entrar hoy al google, si logras dar con la respuesta de favor comparte la solución

saludos!

Estoy_empezando · #9 (**permalink**) 04/01/2010, 10:33

Bueno , pues he ido mejorando el codigo y la manzanita me aparece abajo y se mueve un poquito mas pero no cae desde arriba ... He subido el file a una web que tengo ... Aqui os lo dejo ... www.habbolost.es/google.html

Si sabeis como mejorar el codigo avisadme ... =D

PD: Ya he hecho todos los pasos que me habeis dicho =D

Saludos y Gracias =D

DarkMaurice · #10 (**permalink**) 05/01/2010, 08:32

Al parecer el código que copiaste es cuando ya la manzana está en el suelo, tendrías que haberte fijado en la hoja de estilo inicial cuando recién carga la página, ya que eso da la posición de la imagen, luego se ejecuta el javascript que cambia el atributo position ( position: relative; right: 286px; bottom: -211px; ) y lo reduce hasta llegar a la posición final.

Suerte.

Editado:

Como te decía, cambia en el html esto: position: relative; right: 286px; bottom: -211px;, y el bottom ponle 0px, y te aparecerá más arriba la manzana y el script tenderá a funcionar, la idea es encontrar la posición inicial exacta, ya que el objeto se mueve de forma horizontal también, por eso el movimiento se ve irregular.

eulerss · #11 (**permalink**) 05/01/2010, 09:29

ya vi tu web y efectivamente la manzana esta abajo, como te comenta el buen DarkMaurice quizá sea el CSS, comentanos como te fue xD

saludos!

hades87 · #12 (**permalink**) 05/01/2010, 09:45

Eso, yo también tengo ganas de verlo funcionanado xD

Estoy_empezando · #13 (**permalink**) 05/01/2010, 13:23

Bueno , por fin terminé ... Gracias a DarkMaurice que fue la respuesta definitiva a i pregunta y a todos los demás que me habéis ayudado. Como bien habeis dicho , tenia que configurar la "position" y por fin terminé. Aquí os dejo el link de como quedó : www.habbolost.es/google.html

La posicion exacta

Código HTML:

Ver originalstyle="position: relative; right: 244px; bottom: 50px;"><noscript><style>#fall{bottom:50px!important}</style></body>

El codigo entero

Código HTML:

Ver original<html>
<head><title> La web de Newton </title></head>
<body><img src="Google_files/newton10-tree.jpg" alt="Birthday of Sir Isaac Newton" title="Birthday of Sir Isaac Newton" id="logo" style="margin-top: -1.22em;" onload="window.lol&amp;&amp;lol();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&amp;&amp;google.rein.push(function(){clearInterval(i);h=0;v=1})},2000)" width="384" border="0" height="138"></a><img id="fall" src="Google_files/newton10-apple.png" style="position: relative; right: 244px; bottom: 50px;"><noscript><style>#fall{bottom:50px!important}</style></body>
</html>

Lo unico que me falta es cuando rebota ... Que eso ya no se como es ... xD

Bueno , igualmente ... Saludos y Gracias =D