Estrellas en movimiento dentro del blog

11 de noviembre de 2009 23 comentarios ,
Este es otro de esos truquillos que no sirven para nada pero que se ven muy bonitos en el blog.
Se trata de unas estrellas en movimiento que giran y se expanden en círculo dentro del blog y cambian de color conforme se mueven.
Puedes ver un ejemplo funcionando en este blog de pruebas.

Para ponerlo en tu blog entra en Plantilla | Edición de HTML y antes de </head> pega lo siguiente:
<script language='javascript' type='text/javascript'>
//<![CDATA[
//Iván Nieto Pérez

var incremento = 0
//limite de la expansion de las letras
var y = 200
var x = 300
//posicion del centro de referencia del dibujo que describen las letras
var X = 400
var Y = 200

//velocidad de movimiento de las letras
var velocidad = 50
//mensaje que se mostrara y cuyas letras danzaran por la pantalla
//maximo 25 letras (de lo contrario, se sobrepasa el rango de colores valido)
var mensaje = "★★★★★★★★★★★★★★★★★★★★"
var numeroLetras = mensaje.length

function mueveLetras() {
for ( j = 0 ; j < numeroLetras ; j++ ) {

if (document.layers) {
letra = eval( "document.capa" + j )
letra.top = (Y + Math.cos((20 * Math.sin(incremento/20)) + j * 70) * y * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10))
letra.left = (X + Math.sin((20*Math.sin(incremento/20)) + j * 70) * x * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10))
} else if (document.all) {
letra = eval( "document.all.capa" + j )
letra.style.pixelTop = (Y + Math.cos((20 * Math.sin(incremento/20)) + j * 70) * y * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10))
letra.style.pixelLeft = (X + Math.sin((20*Math.sin(incremento/20)) + j * 70) * x * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10))
} else if (document.getElementById) {
letra = document.getElementById( "capa" + j )
letra.style.top = (Y + Math.cos((20 * Math.sin(incremento/20)) + j * 70) * y * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10)) + 'px'
letra.style.left = (X + Math.sin((20*Math.sin(incremento/20)) + j * 70) * x * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10)) + 'px'
} else //no soportado, finaliza ejecucion
return

}

incremento += .2
setTimeout("mueveLetras()", velocidad)
}

function escribeTexto() {
var texto = ''
for ( j = 0 ; j < numeroLetras ; j++ ) {
texto += '<div id="capa' + j + '" style="position:fixed; visibility:show; left:250px; top:150px; z-index:2; font-size: 2em; color: rgb(' + j*10 + ',' + (255-j*10) + ',150)">' + mensaje.charAt(j) + '</div>'
}
document.write( texto )
}


window.onload = mueveLetras;
if (document.captureEvents) { //N4 requiere invocar la funcion captureEvents
document.captureEvents(Event.LOAD)
}

//]]>
</script>

Luego busca la etiqueta </body> y antes de ella pega esto:
<script language="javascript" type="text/javascript">
escribeTexto()
</script>

¿No te gustan las estrellas? Entonces puedes usar cualquiera de estos caracteres:
♥ ☺ ✿ ♫ ♪ ☽ ☼ ☆

Puedes jugar con la combinación de colores modificando donde dice 150, puedes cambiarlo por 0, 30, 50, 100 o 200, cualquiera de esos números.

Y listo, tendrás un bonito adorno para tu blog que seguro llamará la atención a todos.

NOTA: Es posible que este script no funcione si tienes instalado algún otro script para marquesinas, títulos en movimiento o cursores con texto siguiéndolo.


23 comentarios en:

" Estrellas en movimiento dentro del blog "

  1. jajaja que no 'sirven para nada' quién no ha probado poner todo tipo de cositas como relojes, estrellitas o lo que sea que sigue al puntero...solo que cansan al lector.
    Quedarían bonitas en los blogs de peques.
    Saludos!!!

    ResponderEliminar
  2. Cierto, todos alguna vez adornamos el blog con cosillas que no eran muy necesarias pero que lo teníamos nada más por gusto.
    Supongo que para el día del niño quedará muy bien =)
    Saludos.

    ResponderEliminar
  3. Que liiiiiiindo!
    Despierta mi alma de niña jajaja!
    Sabés que puede ser genial para Navidad !
    (Al menos en mi caso, porque no puedo tener páginas con estas cosas para "clientes" (snif!))....
    Pero me encantan !!

    :)))
    Saludos!
    Karen

    ResponderEliminar
  4. Fíjate que igual a mí se me ocurrió que para Navidad quedaría bien, y ya para primavera se pueden cambiar las estrellas por flores.
    Ni hablar, cuando tengas un blog personal seguro podrás adornarlo con estas estrellas.

    Saludos.

    ResponderEliminar
  5. yeah me zirvioo muxo xido X zubir

    ResponderEliminar
  6. panita las estrellas en el blog me salen de forma vertical , como hago para que me salgan en forma horizontal ayudame con este detalle por fa

    ResponderEliminar
  7. Hola VERTIGO "SALSERO",

    Si pusiste el código tal como está aquí debió haber salido bien, supongo que podría haber algún otro script que causa conflicto con este y por eso se presentan los inconvenientes.

    Saludos.

    ResponderEliminar
  8. si te entiendo mi pana, gracias por contestarme, pero sabes que es lo curioso?? que de la manera correcta me aparece en la seccion de diseño es decir donde se ponen todos los elementos para que aparescan en el frente

    saludos

    ResponderEliminar
  9. Entonces sí es por otro script, ya que en Diseño el otro script no se ejecuta y por eso ahí no causa conflicto y se muestra normal, pero cuando ya es en el blog el otro script se ejecuta y es cuando interfiere con este :S

    Saludos.

    ResponderEliminar
  10. Hola amigo, Excelente este Javascript,me queda super chevere en mi blog.

    Gracias!!!

    ResponderEliminar
  11. ¡Que chulada!
    Feliz Año 2011
    Besos
    nela

    ResponderEliminar
  12. potrito mi niño está super bonito... lo copiare para usarlo en el minuto justo... ya ke agregare los fuegos artificiales que están hermosos... un gran beso para el potro más guapo de México.. muackiz mi potro.

    ResponderEliminar
  13. muackiz... feliz año nuevo mi niño tkm

    ResponderEliminar
  14. Uy, gracias por lo de guapo (me lo voy a creer un día de estos)
    ¡Feliz año también para ti hermosa!

    ResponderEliminar
  15. Muy bueno Potro, muchas gracias.
    A lo mejor lo pongo en mi blog, eres un artista.
    Salud y Feliz Año Nuevo

    ResponderEliminar
  16. Qué amable Gildo ¡Feliz año nuevo!

    ResponderEliminar
  17. u.u debo poner algo mal y no me sale me podrias ayudar? Muchas gracias =D

    ResponderEliminar
  18. No lo veo puesto en tu blog pero si no te resulta seguramente debe ser por otro script que hace que no funcione este.

    ResponderEliminar
  19. Buenas :)
    A mi digamos que las estrellas bajan conforme se va bajando la página, pero se quedan amontonadas unas sobre otras de forma de que parece que solo hay una estrella.
    ¿Qué estoy haciendo mal?
    Saludos

    ResponderEliminar
    Respuestas
    1. Supongo que debe ser el navegador u otro script de tu plantilla que interfiere con este, ya que al menos en mi demo se ve bien en Chrome.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger