Jumping Teks / Teks loncat-loncat

Caranya : 1. Login Blog > Dasbor > 2. Fikirkan kamu mau taroh dimana !!! 3. kalo Di widget tentunya tau dong harus pilih yang mana 4. Kalau kamu mau pakai dalam postingan, kamu harus bekerja pada metode "edit HTML, bukan compose.

Masukkan kode di bawah ini

<div style="color:#8B0000;font-size:16px;font-family:Bodoni MT Black;" id="jumpx"></div>

<script type="text/javascript">
message="CONTOH TEKS MELOMPAT";
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 jump0()
{
   if (message.length > 6)
   {
      for(i=0; i!=message.length; i++)
      {
         txt = txt + "<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>";
      }
      jump = document.getElementById("jumpx");
      jump.innerHTML = txt;
      txt = "";
      jump1a();
   }
}

function jump1a()
{
   nfinal = document.getElementById("n0");
   nfinal.style.left = (-num2).toString() + "px";
   if (num2 != 9)
   {
      num2 = num2 + 3;
      setTimeout("jump1a()", 50);
   }
   else
   {
      jump1b();
   }
}

function jump1b()
{
   nfinal = document.getElementById("n0");
   nfinal.style.left = (-num2).toString() + "px";
   if (num2 != 0)
   {
      num2 = num2-3;
      setTimeout("jump1b()",50);
   }
   else
   {
      jump2();
   }
}

function jump2()
{
   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>";
      }
   }
   jump = document.getElementById("jumpx");
   jump.innerHTML = txt;
   txt = "";
   if (num != (-message.length))
   {
      num--;
      setTimeout("jump2()",50);
   }
   else
   {
      num=0;
      setTimeout("jump0()",50);
   }
}
jump0();

</script>

Lihat Hasilnya di bawah