Membuat Animasi teks ala Matrik

Berikut ini saya akan mencoba berbagi tentang pengolahan animasi kecil, yaitu berupa animasi ala matrix, mungkin anda bisa melihatnya ketika anda akan menyaksikan movie ini, seperti biasa kita akan mengutak-atik bahasa HTML dengan sedikit sentuhan bahasa Java Script.

Yang perlu kita lakukan adalah Log In ke adalam dashboard kita, anda pasti sudah mengetahuinya dan sudah biasa melakukannya, selanjutnya masuk ke menu pengaturan dan pilih tab Edit HTML, dan satu lagi jangan lupa untuk mencheklist kotak Expant Widget.

Langkah selanjutnya, silahkan anda copy dan paste code HTML berikut ini tepat di bawah tag HTML.

<style type="text/css"><br />.matrix { font-family:Lucida Console, Courier, Monotype; font-size:10pt; text-align:center; width:10px; padding:0px; margin:0px;}<br /></style><br /><br /><script type="text/javascript" language="JavaScript"><br /><br /><!--<br />var rows=11; // must be an odd number<br />var speed=50; // lower is faster<br />var reveal=2; // between 0 and 2 only. The higher, the faster the word appears<br />var effectalign="default" //enter "center" to center it.<br /><br />/***********************************************<br />* The Matrix Text Effect- by Richard Womersley (http://www.mf2fm.co.uk/rv)<br />* This notice must stay intact for use<br />* Visit http://www.dynamicdrive.com/ for full source code<br />***********************************************/<br /><br />var w3c=document.getElementById && !window.opera;;<br />var ie45=document.all && !window.opera;<br />var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho;<br />var m_coch=new Array();<br />var m_copo=new Array();<br />window.onload=function() {<br /> if (!w3c && !ie45) return<br /> var matrix=(w3c)?document.getElementById("matrix"):document.all["matrix"];<br /> ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;<br /> ma_txt=" "+ma_txt+" ";<br /> columns=ma_txt.length;<br /> if (w3c) {<br /> while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);<br /> ma_tab=document.createElement("table");<br /> ma_tab.setAttribute("border", 0);<br /> ma_tab.setAttribute("align", effectalign);<br /> ma_tab.style.backgroundColor="#000000";<br /> ma_bod=document.createElement("tbody");<br /> for (x=0; x<rows; x++) {<br /> ma_row=document.createElement("tr");<br /> for (y=0; y<columns; y++) {<br /> matemp=document.createElement("td");<br /> matemp.setAttribute("id", "Mx"+x+"y"+y);<br /> matemp.className="matrix";<br /> matemp.appendChild(document.createTextNode(String.fromCharCode(160)));<br /> ma_row.appendChild(matemp);<br /> }<br /> ma_bod.appendChild(ma_row);<br /> }<br /> ma_tab.appendChild(ma_bod);<br /> matrix.appendChild(ma_tab);<br /> } else {<br /> ma_tab='<ta'+'ble align="'+effectalign+'" border="0" style="background-color:#000000">';<br /> for (var x=0; x<rows; x++) {<br /> ma_tab+='<t'+'r>';<br /> for (var y=0; y<columns; y++) {<br /> ma_tab+='<t'+'d class="matrix" id="Mx'+x+'y'+y+'"> </'+'td>';<br /> }<br /> ma_tab+='</'+'tr>';<br /> }<br /> ma_tab+='</'+'table>';<br /> matrix.innerHTML=ma_tab;<br /> }<br /> ma_cho=ma_txt;<br /> for (x=0; x<columns; x++) {<br /> ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));<br /> m_copo[x]=0;<br /> }<br /> ma_bod=setInterval("mytricks()", speed);<br />}<br /><br />function mytricks() {<br /> x=0;<br /> for (y=0; y<columns; y++) {<br /> x=x+(m_copo[y]==100);<br /> ma_row=m_copo[y]%100;<br /> if (ma_row && m_copo[y]<100) {<br /> if (ma_row<rows+1) {<br /> if (w3c) {<br /> matemp=document.getElementById("Mx"+(ma_row-1)+"y"+y);<br /> matemp.firstChild.nodeValue=m_coch[y];<br /> }<br /> else {<br /> matemp=document.all["Mx"+(ma_row-1)+"y"+y];<br /> matemp.innerHTML=m_coch[y];<br /> }<br /> matemp.style.color="#33ff66";<br /> matemp.style.fontWeight="bold";<br /> }<br /> if (ma_row>1 && ma_row<rows+2) {<br /> matemp=(w3c)?document.getElementById("Mx"+(ma_row-2)+"y"+y):document.all["Mx"+(ma_row-2)+"y"+y];<br /> matemp.style.fontWeight="normal";<br /> matemp.style.color="#00ff00";<br /> }<br /> if (ma_row>2) {<br /> matemp=(w3c)?document.getElementById("Mx"+(ma_row-3)+"y"+y):document.all["Mx"+(ma_row-3)+"y"+y];<br /> matemp.style.color="#009900";<br /> }<br /> if (ma_row<Math.floor(rows/2)+1) m_copo[y]++;<br /> else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);<br /> else if (ma_row<rows+2) m_copo[y]++;<br /> else if (m_copo[y]<100) m_copo[y]=0;<br /> }<br /> else if (Math.random()>0.9 && m_copo[y]<100) {<br /> m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));<br /> m_copo[y]++;<br /> }<br /> }<br /> if (x==columns) clearInterval(ma_bod);<br />}<br /><br />function zoomer(ycol) {<br /> var mtmp, mtem, ytmp;<br /> if (m_copo[ycol]==Math.floor(rows/2)+1) {<br /> for (ytmp=0; ytmp<rows; ytmp++) {<br /> if (w3c) {<br /> mtmp=document.getElementById("Mx"+ytmp+"y"+ycol);<br /> mtmp.firstChild.nodeValue=m_coch[ycol];<br /> }<br /> else {<br /> mtmp=document.all["Mx"+ytmp+"y"+ycol];<br /> mtmp.innerHTML=m_coch[ycol];<br /> }<br /> mtmp.style.color="#33ff66";<br /> mtmp.style.fontWeight="bold";<br /> }<br /> if (Math.random()<reveal) {<br /> mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));<br /> ma_cho=ma_cho.substring(0, mtmp)+ma_cho.substring(mtmp+1, ma_cho.length);<br /> }<br /> if (Math.random()<reveal-1) ma_cho=ma_cho.substring(0, ma_cho.length-1);<br /> m_copo[ycol]+=199;<br /> setTimeout("zoomer("+ycol+")", speed);<br /> }<br /> else if (m_copo[ycol]>200) {<br /> if (w3c) {<br /> mtmp=document.getElementById("Mx"+(m_copo[ycol]-201)+"y"+ycol);<br /> mtem=document.getElementById("Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol);<br /> }<br /> else {<br /> mtmp=document.all["Mx"+(m_copo[ycol]-201)+"y"+ycol];<br /> mtem=document.all["Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol];<br /> }<br /> mtmp.style.fontWeight="normal";<br /> mtem.style.fontWeight="normal";<br /> setTimeout("zoomer("+ycol+")", speed);<br /> }<br /> else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(rows/2);<br /> if (m_copo[ycol]>100 && m_copo[ycol]<200) {<br /> if (w3c) {<br /> mtmp=document.getElementById("Mx"+(m_copo[ycol]-101)+"y"+ycol);<br /> mtmp.firstChild.nodeValue=String.fromCharCode(160);<br /> mtem=document.getElementById("Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol);<br /> mtem.firstChild.nodeValue=String.fromCharCode(160);<br /> }<br /> else {<br /> mtmp=document.all["Mx"+(m_copo[ycol]-101)+"y"+ycol];<br /> mtmp.innerHTML=String.fromCharCode(160);<br /> mtem=document.all["Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol];<br /> mtem.innerHTML=String.fromCharCode(160);<br /> }<br /> setTimeout("zoomer("+ycol+")", speed);<br /> }<br />}<br />// --><br /></script>

Selanjutnya, anda diharuskan meletakan kalimat apa yang akan anda tuliskan dan tempatkan di mana, mungkin anda bisa meletaknnya di sidebar, header, footer atau bahkan di body, unutk meletakannya anda membutuhkan code berikut ini, copy dan paste code HTML ini dan letakan menurut selera abda.

<div id="matrix">Dynamic Drive</div>

Selamat mencoba....