Mensaje de bienvenida ondulante

23 de septiembre de 2009 12 comentarios ,
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 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.


12 comentarios en:

" Mensaje de bienvenida ondulante "

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

    ResponderEliminar
  2. Pepe, Emanuel, Meri,

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

    Saludos.

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

    saludos.

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

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

    ResponderEliminar
  6. Hola CEIP EMILIA PARDO BAZÁN,

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

    ResponderEliminar
  7. disculpa potro pero no encuentro el body q hago
    ya use CTRL+F y no lo bus ¿q hago?

    ResponderEliminar
  8. Entonces busca esta línea:
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

    Y cámbiala por esta:
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload="doWave(0)" >

    ResponderEliminar

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.

 
Ir Arriba Ir Abajo
I Ciudad Blogger