AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

Los dibujitos que van cayendo por el blog.

lunes, 7 de julio de 2008

Esta mañana, yoli me ha enviado un correo con un reto: Tenía un código para poner unas brujitas que iban cayendo por el blog, pero se quedaban a la mitad y desaparecían.

Nunca había visto ni tocado un código de esos, de manera que le he pedido tiempo para estudiármelo.

Esta noche, tras hacer un par de pruebas, he visto lo sencillo que es.

Es tan sencillo como aplicar un código marquee, como el que tengo en el elemento de la sidebar que hace que vaya subiendo el texto, a cada dibujito que vaya a verse.
Pero también le has de decir en que punto del blog va a salir cada uno, la velocidad a la que se va mover, la dirección del movimiento, el ancho del dibujo y, por supuesto, la dirección del dibujo.

La base del código es ésta:

<marquee behavior="scroll" direction="down" style="position:fixed; left:130px; top:10px; width:95px; height:848px;" scrollamount="3"><img src="http://eubabo.googlepages.com/pegaso.gif" "/></marquee>

que se repetirá tantas veces como dibujitos vayan a verse, variando algunos datos para que no formen una línea uniforme.

Vamos a analizarlo. (Pincha en la cruz para expandirlo)


La primera parte del código, la que está entre los dos primeros <> indica:

  • marquee es el tipo de código. Eso ha de estar al principio del código de todos los dibujos que van a verse.
  • behavior="scroll" el comportamiento tipo scroll. También es inamovible para todos.
  • direction si es down bajará si es up subirá. Si combinas ambos, algunos dibujos subirán y otros bajarán al mismo tiempo.
  • style= aquí le damos varios datos:
  • position:fixed; con esto le estamos diciendo que se quedará en su sitio, o sea que no se irá a la derecha ni a la izquierda, sinó que bajará o subirá por una línea imaginaria que es la que le decimos en el siguiente dato.
  • left:130px; o sea que este dibujo en concreto bajará por la línea que trazarías a 130 pixels de distancia de la izquierda del blog.

Aquí voy a hacer un inciso. En realidad no es la izquierda del blog, sinó de la pantalla.

Si ves el blog en una pantalla con una resolución de 800 píxels, o en una ventana que no ocupe toda la pantalla, caso de ser mayor, verás el primer dibujo a 130 pixels de distancia del marco de la ventana, lo que hará que lo veas, más o menos, al principio de la zona útil del blog.

Pero si lo ves en una pantalla grande, a toda pantalla, seguirás viéndolo a 130 píxels de distancia del marco de la pantalla, con lo que, como la zona útil del blog no se extenderá hacia allí, salvo que tengas una plantilla expresada en % totales, verás el primer dibujo en la zona del blog que no se usa.

Lo peor de esto es que el último dibujo, si, por ejemplo, le has dicho que aparezca en la linea de los 800 píxels, en pantallas de 1600 de resolución, con el blog abierto a toda pantalla, el último dibujo se verá a la mitad, con lo que la mitad derecha quedaría vacía.

¿Solución? Poner la mitad de los dibujos fijados respecto a la izquierda y la otra mitad fijados respecto a la derecha, desde esos más o menos 130 píxels hasta el máximo del ancho del blog, con lo que lograrás que se vean bien y ocupen toda la pantalla en todas las resoluciones en que se vean.

Sigamos.

  • top:10px; es el punto en que aparecerá el dibujo. Si pones una cifra mayor, aparecerá desde más abajo. Si en lugar de bajar va a subir será el punto por el que desaparecerá a menos que cambies el top por bottom.
  • width:95px; es el ancho que va a ocupar el dibujo. No puede ser menor que el del propio dibujo o no se vería entero. Si tu dibujo es más estrecho, ponle la medida que tenga. Aquí hay un 95 porqué es lo que mide el que he usado yo para la prueba.
  • height:848px; es la altura que va a tener el recorrido del dibujo. Si le pones un recorrido menor que la altura de la pantalla los dibujos desaparecerán a mitad de ella, como tragados por una grieta del blog. Si le pones una altura mayor que la resolución de la pantalla, no se verá este efecto y simplemente irán desapareciendo por abajo para reaparecer por arriba, o viceversa.
  • scrollamount="X" Es la velocidad. En la muestra del código hay un 3. Puedes poner cualquier número. Cuanto mayor sea, más rápidamente se moverán.

La segunda parte es la dirección de la imagen, con el img src=" para que se vea, y acaba con la orden de cierre /marquee.


Como montar tu propia lluvia de dibujitos.

Para que el efecto sea bonito, has de pensar en cuantos vas a poner y repartirlos por el blog, (recuerda la mitad desde la derecha, la mitad desde la izquierda), combinar las velocidades y no poner las distancias ordenadas, de lo contrario podrías producir un efecto demasiado simétrico.

Si quieres ver la prueba que he hecho, pincha aquí.

Verás que no he seguido mi propio consejo y las distancias y velocidades son símétricas, pero era la mejor forma de averiguar que significaba cada parte de ese código.

¡Ah! que casi se me olvida. Una vez montado has de pegarlo en un elemento HTML/Javascript y ponerlo donde quieras de tu blog, ya sea en la sidebar o en la zona de los posts, sin título.

Imprime esta entrada

23 comentarios. ¿Quieres añadir el tuyo?

  1. Mª Carmen ha dicho
  2. Hola, Eulalia, me encanta tu blog y la verdad es que me has ayudado mucho con el mío, pero estoy intentando poner un solo dibujito que vaya bajando, para ello he utilizado tu sentencia, pero cambiandole sólo la página donde está el dibujo, y nada no hay forma, no me sale el dibujo, va callendo pero es un cuadrito con una cruz, como cuando no enseña la imagen.
    No sé si podrás ayudarme.
    Mil gracias, de todas formas y aprovecho para felicitarte por el trabajo que estás haciendo. Un beso.
    Marisalas.

  3. Eulalia ha dicho
  4. Si no se ve es porque algo en la dirección no está correcto.
    He ido a ver tu blog, pero supongo que lo has quitado, pues no he visto ningun cuadrito cayendo.
    Repasa la dirección, si falta algún símbolo, o algún espacio o las comillas, o un punto, que esas cosas son las que suelen hacer que no se vea un dibujo.
    Un beso.

  5. Ana y bego ha dicho
  6. que bonito te ha quedado precioso es una maravilla todo lo que sabes besitos

  7. Mª Carmen ha dicho
  8. Eulalia, muchísimas gracias, la verdad es que seguía fallando pero he tomado un atajo, he subido la foto através de un programa para subir fotos y así no me ha dado error.
    Un beso, guapa.

  9. mayyica ha dicho
  10. No sé si te di las gracias por la plantilla que usé para cambiar mi blog, de todas formas, tienes un premio que recoger en el mio, pasate si quieres ;) Bscossss

  11. Marian ha dicho
  12. Solo estoy probando mi perfil para ver si funciona. Gracias. Un saludo.

  13. Eulalia ha dicho
  14. Mayyica:
    ¡Voy p'alla!

    Marian: Se ve bien, chiquitito, pero bien.

    Un beso a las dos.

  15. Gem@ ha dicho
  16. Hola Eulalia, queda genial el efecto de expandir la entrada, las imágenes las conseguí de la página del autor y aunque fueran mías puedes hacer uso de ellas tranquilamente así como de todo lo que puedas encontrar en mi blog ;)

  17. charo ha dicho
  18. Hola Eulalia
    Me encanta tu blog, pero me averguenza decirte, que no tengo ni idea y que si me expliaras algo , lo tendrias que hacer como a una niña chica. Me encantaría poner en mi blog las brujitas que van y vienen ,¿ pero como lo hago?Me siento una inutil en esto, Mi blog es una pena, y eso que intento buscar cosas que ponerle, pero ni las encuentro.Me tiré un retazo buscando un fondo de brujitas simpaticas , pero ya te digo, nada.Porfi , ayudame , pero ten paciencia conmigo, soy torpe .bss y perdona por lo que te estoy dando la lata

  19. Eulalia ha dicho
  20. CHARO:
    ¿A que te refieres con brujitas que van y vienen? Porqué si es algo como lo que explico en esta entrada, aunque queda muy chulo, hacen incómodo leer, por eso lo quité del blog donde estaba colocado.

    En cuanto a poner algo de fondo, tienes una thysaway y es fácil hacerlo. Mira en este blog.

  21. Leryann ha dicho
  22. Hola Eulalia!!
    Creo que vas a ayudarme muuuucho en mi nuevo blog. Hace apenas unos días que lo hice y como imaginarás estoy en un mar de dudas...Pero creo que voy a resolver muchas con solo pasarme por tu blog.
    Gracias!!

  23. Alejandro Acosta ha dicho
  24. hola te hablo de argentina ,soy alejandro ,pegue el codigo que vos pusiste y todo bien salio el dibujo bajando una y otra vez , pero aca biene el problema , lopuse en la siderar en un elemento y el dibujo me arrastra toda la siderar ( o los gasget)y estan todos en mpovimientos y no megusta . trate de eliminarlo como cualquier gasdget y se elimino de la pagina el elemento pero el dibujo sigue ahi arrastrandome todo . si pudieras agraciarias tu alluya desde ya gracias este es mi bloghttp://acostaalejandro.blogspot.com/ arrecifes mi tactica y mi estrategia.

  25. Eulalia ha dicho
  26. Lo tenemos mal, porqué no entiendo porqué ha pasado esto.
    De todas formas yo no veo que el dibujo mueva nada.
    Lo que si he visto es la navbar abajo de todo en lugar de arriba.

  27. ternerita ha dicho
  28. HOLA HE COLOCADO EL CODIGO SOLO HE COPIADO Y PEGADO PORQUE NO ENTIENDO MUCHO DE LOS CODIGOS, MI DUDA COMO PUEDO PONER DIFERENTES IMAGENES PARA QUE CCAIGAN UNA TRAS OTRA EN EL COSTADO DE MI BLOG

  29. Eulalia ha dicho
  30. La solución para esto es sencilla. Solo has de ir repitiendo este código tantas veces como dibujitos quieras poner, cambiando solo la dirección de las imágenes, pues cada imagen ha de tener su propia dirección, y la distancia a la que están respecto al borde del blog, o saldrán todos pegados, uno encima de otro.
    También has de modificar el ancho si los dibujitos son de distintos anchos. (Esto lo explico al expandir la entrada por la cruz)

    Ya me contarás.

    Saludos.

  31. sagaro ha dicho
  32. Hola Eulalia apenas entre a tu blog y la verdad me encuentro con un mundo nuevo en lo que se refiere a los diseños de Blogs tengo dos Blogs uno es un tutorial de Access 2007 el otro para publicar blogs en este agregue tu blog porque me parece indispensable para todo bloguero y solo quiero felicitarte. Quizás mas adelante utilice alguno de tus trucos en mis Blogs aunque agradecería una critica o sugerencia tuya sobre mis Blogs ya que el tuyo esta fantástico y nuevamente felicidades y Gracias por compartir de forma tan clara y directa.

  33. ely21 ha dicho
  34. MUCHAS GRACIAS ELULALIA POR HACER MAS FACIL ADORNAR NUESTRO BLOG.
    DESE YA TE SIGO, BESITOS.
    ELIZABETH.

  35. PURI ha dicho
  36. Hola, en primer lugar, felicitarte por tu gran labor, decirte que te explicas fenomenalmente, he conseguido poner dibujitos que bajen y suban en mi blog gracias a tu explicacion, solo quiero preguntarte una cosa, tu codigo estaba para una direccion por ejemplo abajo, e izquierda, yo he hecho tambien subir y derecha, pero no me he atrevido a ponerlo todo en el mismo gadget por si no funcionaba, asi que he puesto cuatro gadgets, quisiera saber si se pueden unir todos en uno, gracias de todos modos por tan maravilloso blog, del cual me he hecho seguidora, un saludo

  37. PURI ha dicho
  38. Por cierto, perdona, olvidé poner el enlace a mi blog, es este
    http://miscollages-puri.blogspot.com/
    es modesto, pues acabo de empezar a aprender a manejarlo, pero gracias a personas como tu, eso cada dia es mas facil, un saludo

  39. Eulalia ha dicho
  40. Puri:
    Si, puedes poner que algunos suban y otros bajen, que unos vayan a la izquierda y otros a la derecha
    Todo depende de como los combines ya que en este código le das una orden concreta a cada dibujo que añadas.

  41. PURI ha dicho
  42. Gracias Eulalia, ya lo he podido hacer, he estado probando,y vuelvo a repetirte, graciassssssss, sabes explicarte de manera que te podamos entender, un saludo

  43. Puri Requena ha dicho
  44. Hola Eulalia, en primer lugar, un saludo, volviendo al tema de los dibujitos cayendo, tengo una preguntita, he hecho uno de mariposas cayendo, y cambie lo que cambie en el codigo sobre la ubicacion, no consigo que me aparezcan a la derecha de mi blog, solo me aparecen del centro hacia la izquierda, quisiera que me dijeras cual es la ubicacion para que aparezcan por la izquierda, por supuesto cambie lo de derecha e izquierda, pero no se exactamente que parametros tengo que poner, recibe por adelantado mis eternas gracias, un beso

  45. Eulalia ha dicho
  46. Puri:

    Como digo en la entrada, los parámetros a modificar para que se vean más o menos a la izquierda es la distancia en px.

    Si le pones left:200px; se verá a 200 pixels de la izquierda, si le pones left:20px; se verá a 20 pixels de distancia de la izquierda.

    Como se ha de poner un código por cada dibujo, has de ir modificando este dato para que no salgan todos juntos en el mismo sitio.

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.