Letras saltantes (Jumping letters) con javascript

…

Seguro ya te distes cuenta que en la línea superior se muestra el texto "Letras saltantes con Javascript" con una animación de movimiento como de tipo “ola”, “gusano” o como la desees identificar.

Este efecto lo podemos lograr utilizando la lógica de hacer saltar las letras de manera secuencial.

Aunque a ciertas personas les pueda parecer un poco molesto, también es cierto que te podría servir para llamar la atención hacia algún espacio dentro de tu página.

El código es el siguiente:

<div id="jumping_letters" style="color: rgb(0 , 0 , 255); font-family: "arial"; font-size: 36px; font-style: normal; font-weight: bold; text-align: left; text-decoration: none;">
</div>
<script type="text/javascript">
message="Letras saltantes con Javascript";
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;
mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";

function salto0()
{
   if (message.length > 6)
   {
      for(i=0; i!=message.length; i++)
      {
         txt = txt + "<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>";
      }
      salto = document.getElementById("jumping_letters");
      salto.innerHTML = txt;
      txt = "";
      salto1a();
   }
}
function salto1a()
{
   nfinal = document.getElementById("n0");
   nfinal.style.left = (-num2).toString() + "px";
   if (num2 != 9)
   {
      num2 = num2 + 3;
      setTimeout("salto1a()", 50);
   }
   else
   {
      salto1b();
   }
}
function salto1b()
{
   nfinal = document.getElementById("n0");
   nfinal.style.left = (-num2).toString() + "px";
   if (num2 != 0)
   {
      num2 = num2-3;
      setTimeout("salto1b()",50);
   }
   else
   {
      salto2();
   }
}
function salto2()
{
   txt = "";
   for(i=0;i != message.length; i++)
   {
      if (i+num > -1 && i+num < 7)
      {
         txt = txt + "<span style='position:relative;top:" + mes[i+num] + "px'>" + message.charAt(i) + "</span>";
      }
      else
      {
         txt = txt + "<span>" + message.charAt(i) + "</span>";
      }
   }
   salto = document.getElementById("jumping_letters");
   salto.innerHTML = txt;
   txt = "";
   if (num != (-message.length))
   {
      num--;
      setTimeout("salto2()",50);
   }
   else
   {
      num=0;
      setTimeout("salto0()",50);
   }
}
salto0();
</script>

No obstante puedes cambiar la fuente en su color, familia, tamaño y estilo, modificando el código en la primera línea:

Y en la línea del mensaje puedes cambiar el texto "Letras saltantes con Javascript" por el que tú desees:

message="Letras saltantes con Javascript";

Todo depende de lo que desees presentar como texto para llamar la atención visual de los visitantes a tu página.

A lo mejor te preguntarás, ¿por qué esa cantidad de código?, pues yo te diré que el efecto así lo requiere. No obstante, podrías por ejemplo colocarlo en un gadget en blogger, para después moverlo donde lo requieras en el sitio.

Quizás también te interese:

Pantalla con color de fondo aleatorio.

Letras saltantes (Jumping letters) con javascript

No hay comentarios.:

Sitios recomendados

Sigue ElectroSYSTEM en: