comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[JavaScript][BASICO] Efecto Matrix

  • 0 Respuestas
  • 1823 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado blackdrake

  • *
  • Co Admin
  • Mensajes: 1914
  • Actividad:
    0%
  • Reputación 15
    • Ver Perfil
« en: Julio 20, 2013, 08:29:52 am »
Aquí les dejo el código que simula matrix, muy bueno para titulos o incorporarlo a algún banner:

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

Solo hay que editar el texto que dice Blackdrake por el que quieran.

Un saludo :)
« Última modificación: Mayo 10, 2014, 02:16:40 pm por Destructor.cs »



 

¿Te gustó el post? COMPARTILO!



[JavaScript][MEDIO] Texto que aparece palabra por palabra

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1132
Último mensaje Febrero 24, 2010, 11:16:49 am
por ANTRAX
[HTML][BASICO] Primeros pasos en HTML

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1205
Último mensaje Febrero 24, 2010, 11:53:11 am
por ANTRAX
[JavaScript][MEDIO] Script ''cambia el color letra a letra''

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1347
Último mensaje Febrero 24, 2010, 11:14:30 am
por ANTRAX
[JavaScript] 4 clase: Datos Boleanos o Logicos, variables indefinidas o nulas

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1483
Último mensaje Febrero 24, 2010, 11:02:19 am
por ANTRAX
[JavaScript] 5 clase: Funcion typeof y reasignacion dinamica de variables

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1654
Último mensaje Febrero 24, 2010, 11:03:06 am
por ANTRAX