Home » » Cara Mudah Membuat Tulisan Efek Matrix

Cara Mudah Membuat Tulisan Efek Matrix

Written By Cholil Smart on Sunday, 8 May 2011 | 17:47

Assalamualaikum...
Selamat pagi semuanya!!
saat ini tidak perlu basa-basi karena keburu ada pelatihan dan saat ini saya akan berbagi tentang Cara Mudah Membuat Tulisan Efek Matrix hal ini saya dari Richard Womerley.
langkahnya sebagai berikut :
  • Loin dulu di www.blogspot.com atau disini
  • copy code berikut dan paste pada javascript/HTML

<style type="text/css">
.matrix { font-family:Lucida Console, Courier, Monotype; font-size:10pt; text-align:center; width:15px; padding:0px; margin:0px;}
</style>

<script type="text/javascript" language="JavaScript">

<!--
var rows=11; // must be an odd number
var speed=50; // lower is faster
var reveal=2; // between 0 and 2 only. The higher, the faster the word appears
var effectalign="default" //enter "center" to center it.

/***********************************************
* The Matrix Text Effect- by Richard Womersley (http://www.mf2fm.co.uk/rv)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var w3c=document.getElementById && !window.opera;;
var ie45=document.all && !window.opera;
var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho;
var m_coch=new Array();
var m_copo=new Array();
window.onload=function() {
 if (!w3c && !ie45) return
  var matrix=(w3c)?document.getElementById("matrix"):document.all["matrix"];
  ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;
  ma_txt=" "+ma_txt+" ";
  columns=ma_txt.length;
  if (w3c) {
    while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);
    ma_tab=document.createElement("table");
    ma_tab.setAttribute("border", 0);
    ma_tab.setAttribute("align", effectalign);
    ma_tab.style.backgroundColor="#000000";
    ma_bod=document.createElement("tbody");
    for (x=0; x<rows; x++) {
      ma_row=document.createElement("tr");
      for (y=0; y<columns; y++) {
        matemp=document.createElement("td");
        matemp.setAttribute("id", "Mx"+x+"y"+y);
        matemp.className="matrix";
        matemp.appendChild(document.createTextNode(String.fromCharCode(160)));
        ma_row.appendChild(matemp);
      }
      ma_bod.appendChild(ma_row);
    }
    ma_tab.appendChild(ma_bod);
    matrix.appendChild(ma_tab);
  } else {
    ma_tab='<ta'+'ble align="'+effectalign+'" border="0" style="background-color:#000000">';
    for (var x=0; x<rows; x++) {
      ma_tab+='<t'+'r>';
      for (var y=0; y<columns; y++) {
        ma_tab+='<t'+'d class="matrix" id="Mx'+x+'y'+y+'"> </'+'td>';
      }
      ma_tab+='</'+'tr>';
    }
    ma_tab+='</'+'table>';
    matrix.innerHTML=ma_tab;
  }
  ma_cho=ma_txt;
  for (x=0; x<columns; x++) {
    ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
    m_copo[x]=0;
  }
  ma_bod=setInterval("mytricks()", speed);
}

function mytricks() {
  x=0;
  for (y=0; y<columns; y++) {
    x=x+(m_copo[y]==100);
    ma_row=m_copo[y]%100;
    if (ma_row && m_copo[y]<100) {
      if (ma_row<rows+1) {
        if (w3c) {
          matemp=document.getElementById("Mx"+(ma_row-1)+"y"+y);
          matemp.firstChild.nodeValue=m_coch[y];
        }
        else {
          matemp=document.all["Mx"+(ma_row-1)+"y"+y];
          matemp.innerHTML=m_coch[y];
        }
        matemp.style.color="#33ff66";
        matemp.style.fontWeight="bold";
      }
      if (ma_row>1 && ma_row<rows+2) {
        matemp=(w3c)?document.getElementById("Mx"+(ma_row-2)+"y"+y):document.all["Mx"+(ma_row-2)+"y"+y];
        matemp.style.fontWeight="normal";
        matemp.style.color="#00ff00";
      }
      if (ma_row>2) {
          matemp=(w3c)?document.getElementById("Mx"+(ma_row-3)+"y"+y):document.all["Mx"+(ma_row-3)+"y"+y];
        matemp.style.color="#009900";
      }
      if (ma_row<Math.floor(rows/2)+1) m_copo[y]++;
      else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);
      else if (ma_row<rows+2) m_copo[y]++;
      else if (m_copo[y]<100) m_copo[y]=0;
    }
    else if (Math.random()>0.9 && m_copo[y]<100) {
      m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));
      m_copo[y]++;
    }
  }
  if (x==columns) clearInterval(ma_bod);
}

function zoomer(ycol) {
  var mtmp, mtem, ytmp;
  if (m_copo[ycol]==Math.floor(rows/2)+1) {
    for (ytmp=0; ytmp<rows; ytmp++) {
      if (w3c) {
        mtmp=document.getElementById("Mx"+ytmp+"y"+ycol);
        mtmp.firstChild.nodeValue=m_coch[ycol];
      }
      else {
        mtmp=document.all["Mx"+ytmp+"y"+ycol];
        mtmp.innerHTML=m_coch[ycol];
      }
      mtmp.style.color="#33ff66";
      mtmp.style.fontWeight="bold";
    }
    if (Math.random()<reveal) {
      mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));
      ma_cho=ma_cho.substring(0, mtmp)+ma_cho.substring(mtmp+1, ma_cho.length);
    }
    if (Math.random()<reveal-1) ma_cho=ma_cho.substring(0, ma_cho.length-1);
    m_copo[ycol]+=199;
    setTimeout("zoomer("+ycol+")", speed);
  }
  else if (m_copo[ycol]>200) {
    if (w3c) {
      mtmp=document.getElementById("Mx"+(m_copo[ycol]-201)+"y"+ycol);
      mtem=document.getElementById("Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol);
    }
    else {
      mtmp=document.all["Mx"+(m_copo[ycol]-201)+"y"+ycol];
      mtem=document.all["Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol];
    }
    mtmp.style.fontWeight="normal";
    mtem.style.fontWeight="normal";
    setTimeout("zoomer("+ycol+")", speed);
  }
  else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(rows/2);
  if (m_copo[ycol]>100 && m_copo[ycol]<200) {
    if (w3c) {
      mtmp=document.getElementById("Mx"+(m_copo[ycol]-101)+"y"+ycol);
      mtmp.firstChild.nodeValue=String.fromCharCode(160);
      mtem=document.getElementById("Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol);
      mtem.firstChild.nodeValue=String.fromCharCode(160);
    }
    else {
      mtmp=document.all["Mx"+(m_copo[ycol]-101)+"y"+ycol];
      mtmp.innerHTML=String.fromCharCode(160);
      mtem=document.all["Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol];
      mtem.innerHTML=String.fromCharCode(160);
    }
    setTimeout("zoomer("+ycol+")", speed);
  }
}
// -->
</script>
<div id="matrix">CHOLIL'S BLOG</div>
Catatan : Ganti tuisan yang merah dengan kata sesuai keinginan sobat

Sampai disini dulu ya semoga bermanfaat, jika sobat ada masalah tentang Cara Mudah Membuat Tulisan Efek Matrix, sobat bisa bertanya pada saya silahkan tinggalkan komentar dipostingan ini atau di buku tamu atau lebih jelasnya lagi silahkan mampir kerumah Richard Womerley. sobat bisa klik disini.

o y aku pergi dulu ya dah terlambat ne!!
Assalamualaikum... bye bye
Share this article :

25 komentar:

  1. Hello my friend, thank you very much for your visit, happy new week with peace & successes. Hugs Valter.

    ReplyDelete
  2. haii aku blogger baru..coba2 bikin blog nih,,tapi berkat blog kk ini blog aku jd tampil lebih keren..makasih ya k..follow back blog aku ya http://vanillazdifga.blogspot.com

    ReplyDelete
  3. $$$undulan di pagi hari sobat.. di tunggu dengan hanat $$undulannya

    ReplyDelete
  4. wah asyik nie tips,,, lam knal ya sob,,,

    ReplyDelete
  5. mantabs postinganya...keep update.

    ReplyDelete
  6. mantab gan postingannya, gan tau gak cara membikin judul postingan dengan underline? please

    ReplyDelete
  7. semuanya@ terimakasih ya sudah mau berkunjung keblog ane, insyaallah ane slalu penuhi permintaan sobat, folback, ki$$ back dll.
    o y Insurance@ cara untuk memberi underline pada judul postingan, mas brow cukup memberi atribut seperti berikut
    <>JUDUL POSTING<> (jika underline saja)
    <>JUDUL POSTING (jika berkedip seperti judul post ini, itu hasil percobaan ane......(sebelum menjawab mencoba dulu wkwkwkwk)
    setip dalam kurung yang kosong kasih hurup U

    ReplyDelete
  8. Hello my friend, thank you very much for your visit, happy Wednesday with peace & happiness. Hugs Valter.

    ReplyDelete
  9. wah mantab ne,,,sukses blog nya

    ReplyDelete
  10. Thank you very much my friend for your visit, happy new day with peace & happiness. Hugs Valter.

    ReplyDelete
  11. qt juga punya Komunitas Blogger Madura juga namanya Plat-M.com

    Gabung juga Yuk.. sama2 kita Explorasi dan menduniakan Madura.. ;)

    ReplyDelete
  12. Nice post. salam kenal sahabat+salam kompak sahabat.

    ReplyDelete
  13. makasih ya gan, ane numpang sedot neh artikel ntar ane tancapin sumbernya gan....makasih ya gan


    salam blogger!!

    ReplyDelete
  14. Bisa dipraktekkan nih..sekalian follow ya mas no : 278

    ReplyDelete
  15. tadinya ane ga' percaya gan
    setelah di coba, makyusssssssssssss

    ReplyDelete
  16. Makasih Gan, efek huruf turun bagus tuh.. ;)

    ReplyDelete
  17. anjing bangsat nih di tipu janga mau , jangan di coba bangsat ni orang

    ReplyDelete
    Replies
    1. sesama blogger, ngomongnya gitu. kamu blogger mana sich?? yang lain bisa kok sendiri yang ga' bisa

      Delete

Komentar anda saya butuhkan
Komentar anda akan sangat membantu saya
Komentar anda menjadi kebanggaan saya
komentar anda lebih berharga dari berlian

Jangan menyertakan URL pada kotak komentar
karena akan saya anggap sebagai SPAM

Popular Posts

 
Support : Petotu | Pondok Template
| Penyejuk Hati
Copyright © 2013. PETOTU - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger