Text scrambler atau mengacak-acak tulisan

Text scrambler atau mengacak-acak tulisan tulisan adalah sebuah animasi yang digunakan untuk mengacak tulisan dalam blog anda, animasi ini berjalan beberapa detik setelah blog terbuka seluruhnya. Untuk membuat animasi ini memerlukan agak banyak code akan tetapi tidak membuat loading blog menjadi berat akan tetapi jika animasi ini sudah berjalan tulisan yang ada pada blog anda akan susah untuk dibaca. Pada malam tahun baru ini saya mencoba memberikan sesuatu yang spesial buat anda pengunjung setia Aditya Blogs dengan menyajikan Animasi text scrambler ini
Untuk melihat contoh penerapan code ini silahkan lihat disini.
Nah jika anda berminat untuk menerapkan code ini berikut caranya:
1. Login ke Blogger.com
2. Klik blog yang akan diberikan efek animasi ini
3. Klik Template --> Edit HTML --> Lanjutkan --> Centang Expand Template Widget
4. Jangan lupa backup template dulu
5. Cari code </head> (gunakan CTRL+F untuk memudahkan pencarian)
6. Jika sudah ketemu copy code berikut dan paste di atas code tadi

<script type="text/javascript">
// <![CDATA[
var delay=5; // seconds until scramble takes place once page loaded
var colour="#f00"; // colour which letters are highlighted when being swapped

/***************************\
*     Web-Page Scrambler    *
*(c)2005-12 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var elems=new Array();
var chars=new Array();
var elmax=chmax=0;
var nexco="transparent";

function addLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addLoadEvent(scramble);

function scramble() { if (document.getElementById) {
  var i, j, txt, parent, span, words;
  getAllText(document.body);
  for (i=0; i<elmax; i++) {
    txt=elems[i].nodeValue;
    parent=elems[i].parentNode;
    words=elems[i].nodeValue.split(" ");
    for (j=0; j<words.length; j++) {
      if (words[j].match(/^\w{2,}$/)) {
        span=document.createElement("span");
        span.appendChild(document.createTextNode(words[j]));
        parent.insertBefore(span, elems[i]);
        chars[chmax++]=span;
      }
      else parent.insertBefore(document.createTextNode(words[j]), elems[i]);
      if (j!=words.length-1) parent.insertBefore(document.createTextNode(" "), elems[i]);
    }
    parent.removeChild(elems[i]);
  }
  setTimeout("scrumble()", delay*1000);
}}

function scrumble() {
  var i, l1, r, l2;
  for (i=0; i<chmax; i++) {
    l1=chars[i].firstChild.nodeValue.length;
    do {
      r=i+Math.floor(Math.random()*(chmax-i));
      l2=chars[r].firstChild.nodeValue.length;
    }
    while (i<chmax-256 && l1!=l2);
    setTimeout("swap("+i+", "+r+")", 40*i);
  }
}

function swap(i, j) {
  var k=chars[i].firstChild.nodeValue;
  var l=chars[j].firstChild.nodeValue;
  if (i) chars[i].style.backgroundColor=nexco;
  if (i!=chmax-1) {
      nexco=chars[i+1].style.backgroundColor;
      chars[i+1].style.backgroundColor=colour;
  }
  chars[i].firstChild.nodeValue=l;
  chars[j].firstChild.nodeValue=k;
}

function getAllText(el) {
  if (el.nodeType==3 && !el.nodeValue.match(/^\s*$/)) elems[elmax++]=el;
  if (el.childNodes.length) for (var i=0; i<el.childNodes.length; i++) getAllText(el.childNodes[i]);
}
// ]]>
</script>

7. Selesai, simpan template anda dan lihat hasilnya.

Selamat mencoba!!!...

Sumber Code: http://www.mf2fm.com/rv/dhtmlscramble.php

Tweet