Estrellas en movimiento dentro del blog

|

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 Diseño > 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.

12 comentarios:

Graciela dijo...

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!!!

El Potro dijo...

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.

VK Import dijo...

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

El Potro dijo...

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.

VERTIGO "SALSERO" dijo...

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

El Potro dijo...

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.

VERTIGO "SALSERO" dijo...

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

El Potro dijo...

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.

Willinton Agudelo Rubio dijo...

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

Gracias!!!

Publicar un comentario en la entrada

Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.

 

Ciudad Blogger. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com

Ir arriba Ir abajo