Mensaje de bienvenida ondulante

|

El siguiente script es para crear un mensaje de bienvenida en el blog con un efecto ondulante (wave) bastante llamativo. Pero ojo, sólo funciona SI NO tienes otro script para un scroll de bienvenida o algo parecido, pues si ya tienes un scroll no funcionará este.
Puedes ver un ejemplo en este blog de pruebas.

(23/09/2009) ACTUALIZACIÓN: Sólo funciona para Google Chrome, Safari e Internet Explorer 8, versiones anteriores a Internet Explorer funciona pero tarda en aparecer.

Para ponerlo en tu blog entra a Diseño > Edición de HTML, busca la etiqueta <body> y remplázala por esto:
<body onload="doWave(0)">

Ahora antes de </head> pega esto:
<script language='JavaScript'>
//<![CDATA[
var theText = "Bienvenidos"; //Aquí va tu texto

function nextSize(i,incMethod,textLength)
{
if (incMethod == 1) return (50*Math.abs( Math.sin(i/(textLength/3.14))) ); //Tamaño del texto
if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
}
function sizeCycle(text,method,dis)
{
output = "";
for (i = 0; i < text.length; i++)
{
size = parseInt(nextSize(i +dis,method,text.length));
output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
}
theWave.innerHTML = output;
}
function doWave(n)
{
sizeCycle(theText,1,n);
if (n > theText.length) {n=0}
setTimeout("doWave(" + (n+1) + ")", 50); //Velocidad
}
//]]>
</script>

Cambia lo que está en rojo por el texto que quieras, el tamaño de la letra y la velocidad.
Por último entra a Diseño > Elementos de la página > Añadir gadget > HTML/Javascript y ahí pega esto:
<span style="color:red">
<div id="theWave">
</div></span>

Arrastra ese elemento hasta abajo de la cabecera de tu blog y cambia donde dice color:red por el color de letra que quieras.

9 comentarios:

pepe dijo...

creo que entendi algo pero, no veo el ejemplo en el blog de pruebas :S.

El Potro™ dijo...

Pepe, Emanuel, Meri,

Olvidé decir que sólo funciona para Internet Explorer 8, Google Chrome y Safari.
Mil disculpas.

Saludos.

pepe dijo...

jajaj ok no te preocupes, es k yo tengo el mozilla, pero igual no te preocupes.:D

saludos.

Emanuel Martinez dijo...

ok ok,no problem,igual esta bueno para la gente que se mete por Intenert Explore

CEIP EMILIA PARDO BAZÁN dijo...

DONDE BUSCO body CUANDO ESTOY YA EN html . ALLI NO APARECE NADA, ESTA VACIO.

El Potro dijo...

Hola CEIP EMILIA PARDO BAZÁN,

Usa las teclas CTRL + F para buscar la etiqueta <body>
Saludos.

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