Matrix Text ( ကုိယ္တုိင္ေလ့လာ မွတ္စု ၁၃ )

     ဒါေလးကေတာ့ Matrix ဇာတ္ကား ၾကည့္ဖူးရင္သိမွာပါ။ Matrix ထဲကလို စာသားေလးေတြ ေျပးေနတာေပါ့။ ဒါလဲ kp3family ပါပဲ။ kp3family ကေတာ့ ကုိယ္ဘေလာ့အတြက္ နည္းပညာေတြ အမ်ားၾကီး ရခဲ့ပါတယ္။ ဒါအျပင္ ကၽြန္ေတာ္. ဘေလာ့ ေဘးနား နည္းပညာေအာက္က လိပ္စာေတြကလဲ ကို္ယ့ဘေလာ့အတြက္ အမ်ားၾကီး အေထာက္အကူ ျပဳခဲ့ပါတယ္။

၁။ Design>Layout>Add a Gadget>HTML/Java Script ကုိသြားပါ။
၂။ ေအာက္ပါ ကုတ္မ်ားကုိ Copy/Paste လုပ္ပါသည္။

1. <style type="text/css">  
2. .matrix { font-family:Lucida Console, Courier, Monotype; font-size:10pt; text-align:center; width:30px; padding:0px; margin:0px;}  
3. </style>  
4.   
5. <script type="text/javascript" language="JavaScript">  
6.   
7. <div id="matrix">dfdfdfd</div>  
8.   
9. <!--  
10. var rows=11; // must be an odd number  
11. var speed=50; // lower is faster  
12. var reveal=2; // between 0 and 2 only. The higher, the faster the word appears  
13. var effectalign="default" //enter "center" to center it.  
14.   
15. var w3c=document.getElementById && !window.opera;;  
16. var ie45=document.all && !window.opera;  
17. var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho;  
18. var m_coch=new Array();  
19. var m_copo=new Array();  
20. window.onload=function() {  
21.  if (!w3c && !ie45) return  
22.   var matrix=(w3c)?document.getElementById("matrix"):document.all["matrix"];  
23.   ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;  
24.   ma_txt=" "+ma_txt+" ";  
25.   columns=ma_txt.length;  
26.   if (w3c) {  
27.     while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);  
28.     ma_tab=document.createElement("table");  
29.     ma_tab.setAttribute("border", 0);  
30.     ma_tab.setAttribute("align", effectalign);  
31.     ma_tab.style.backgroundColor="#000000";  
32.     ma_bod=document.createElement("tbody");  
33.     for (x=0; x<rows; x++) {  
34.       ma_row=document.createElement("tr");  
35.       for (y=0; y<columns; y++) {  
36.         matemp=document.createElement("td");  
37.         matemp.setAttribute("id", "Mx"+x+"y"+y);  
38.         matemp.className="matrix";  
39.         matemp.appendChild(document.createTextNode(String.fromCharCode(160)));  
40.         ma_row.appendChild(matemp);  
41.       }  
42.       ma_bod.appendChild(ma_row);  
43.     }  
44.     ma_tab.appendChild(ma_bod);  
45.     matrix.appendChild(ma_tab);  
46.   } else {  
47.     ma_tab='<ta'+'ble align="'+effectalign+'" border="0" style="background-color:#000000">';  
48.     for (var x=0; x<rows; x++) {  
49.       ma_tab+='<t'+'r>';  
50.       for (var y=0; y<columns; y++) {  
51.         ma_tab+='<t'+'d class="matrix" id="Mx'+x+'y'+y+'"> </'+'td>';  
52.       }  
53.       ma_tab+='</'+'tr>';  
54.     }  
55.     ma_tab+='</'+'table>';  
56.     matrix.innerHTML=ma_tab;  
57.   }  
58.   ma_cho=ma_txt;  
59.   for (x=0; x<columns; x++) {  
60.     ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));  
61.     m_copo[x]=0;  
62.   }  
63.   ma_bod=setInterval("mytricks()", speed);  
64. }  
65.   
66. function mytricks() {  
67.   x=0;  
68.   for (y=0; y<columns; y++) {  
69.     x=x+(m_copo[y]==100);  
70.     ma_row=m_copo[y]%100;  
71.     if (ma_row && m_copo[y]<100) {  
72.       if (ma_row<rows+1) {  
73.         if (w3c) {  
74.           matemp=document.getElementById("Mx"+(ma_row-1)+"y"+y);  
75.           matemp.firstChild.nodeValue=m_coch[y];  
76.         }  
77.         else {  
78.           matemp=document.all["Mx"+(ma_row-1)+"y"+y];  
79.           matemp.innerHTML=m_coch[y];  
80.         }  
81.         matemp.style.color="#33ff66";  
82.         matemp.style.fontWeight="bold";  
83.       }  
84.       if (ma_row>1 && ma_row<rows+2) {  
85.         matemp=(w3c)?document.getElementById("Mx"+(ma_row-2)+"y"+y):document.all["Mx"+(ma_row-2)+"y"+y];  
86.         matemp.style.fontWeight="normal";  
87.         matemp.style.color="#00ff00";  
88.       }  
89.       if (ma_row>2) {  
90.           matemp=(w3c)?document.getElementById("Mx"+(ma_row-3)+"y"+y):document.all["Mx"+(ma_row-3)+"y"+y];  
91.         matemp.style.color="#009900";  
92.       }  
93.       if (ma_row<Math.floor(rows/2)+1) m_copo[y]++;  
94.       else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);  
95.       else if (ma_row<rows+2) m_copo[y]++;  
96.       else if (m_copo[y]<100) m_copo[y]=0;  
97.     }  
98.     else if (Math.random()>0.9 && m_copo[y]<100) {  
99.       m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));  
100.       m_copo[y]++;  
101.     }  
102.   }  
103.   if (x==columns) clearInterval(ma_bod);  
104. }  
105.   
106. function zoomer(ycol) {  
107.   var mtmp, mtem, ytmp;  
108.   if (m_copo[ycol]==Math.floor(rows/2)+1) {  
109.     for (ytmp=0; ytmp<rows; ytmp++) {  
110.       if (w3c) {  
111.         mtmp=document.getElementById("Mx"+ytmp+"y"+ycol);  
112.         mtmp.firstChild.nodeValue=m_coch[ycol];  
113.       }  
114.       else {  
115.         mtmp=document.all["Mx"+ytmp+"y"+ycol];  
116.         mtmp.innerHTML=m_coch[ycol];  
117.       }  
118.       mtmp.style.color="#33ff66";  
119.       mtmp.style.fontWeight="bold";  
120.     }  
121.     if (Math.random()<reveal) {  
122.       mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));  
123.       ma_cho=ma_cho.substring(0, mtmp)+ma_cho.substring(mtmp+1, ma_cho.length);  
124.     }  
125.     if (Math.random()<reveal-1) ma_cho=ma_cho.substring(0, ma_cho.length-1);  
126.     m_copo[ycol]+=199;  
127.     setTimeout("zoomer("+ycol+")", speed);  
128.   }  
129.   else if (m_copo[ycol]>200) {  
130.     if (w3c) {  
131.       mtmp=document.getElementById("Mx"+(m_copo[ycol]-201)+"y"+ycol);  
132.       mtem=document.getElementById("Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol);  
133.     }  
134.     else {  
135.       mtmp=document.all["Mx"+(m_copo[ycol]-201)+"y"+ycol];  
136.       mtem=document.all["Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol];  
137.     }  
138.     mtmp.style.fontWeight="normal";  
139.     mtem.style.fontWeight="normal";  
140.     setTimeout("zoomer("+ycol+")", speed);  
141.   }  
142.   else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(rows/2);  
143.   if (m_copo[ycol]>100 && m_copo[ycol]<200) {  
144.     if (w3c) {  
145.       mtmp=document.getElementById("Mx"+(m_copo[ycol]-101)+"y"+ycol);  
146.       mtmp.firstChild.nodeValue=String.fromCharCode(160);  
147.       mtem=document.getElementById("Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol);  
148.       mtem.firstChild.nodeValue=String.fromCharCode(160);  
149.     }  
150.     else {  
151.       mtmp=document.all["Mx"+(m_copo[ycol]-101)+"y"+ycol];  
152.       mtmp.innerHTML=String.fromCharCode(160);  
153.       mtem=document.all["Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol];  
154.       mtem.innerHTML=String.fromCharCode(160);  
155.     }  
156.     setTimeout("zoomer("+ycol+")", speed);  
157.   }  
158. }  
159. // -->  
160. </script>  
161.   
162.   
163. <div id="matrix">ASMOONSATURN</div>  
164. 
     

* အနီေရာင္စာသား ေနရာတြင္ ကုိယ္ေဖၚျပခ်င္ေသာ စာသား အစားထုိး ႏီုင္ပါသည္။ ကုိယ့္ Layout>Column ၏ Width ႏွင့္ သင့္ေတာ္သေလာက္ စာလံုးအရည္အတြက္ပဲ ေကာင္းပါသည္။ မ်ားလွ်င္ မလွေတာ့ပါ။
၃။ Save ပါသည္။

from http://kp3family.blogspot.com/2011/05/kp3-effect-matrix-text.html