The Matrix Effect from RV's free DHTML and JavaScripts text and graphic scripts

.:The MATRIX Re-Scripted 2012:.

This script has been tested on and shown to work with the following browsers: Internet Explorer version 5 and above Google Chrome version 1 and above Mozilla Firefox version 1 and above Apple Safari version 3 and above Opera version 8 and above (including Opera mobile) Android Browser version 3 and above

18-Sep-2014: Minor performance improvements. 01-Jan-2012: Re-scripted for 2012 (a bit funkier but retaining the original features). 22-Sep-2005: Internet Explorer 4 support removed. Made XML compliant.
STEP 1: Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page <script type="text/javascript"> // <![CDATA[ var height=15; // number of rows - must be an odd number var speed=100; // lower is faster var reveal=33; // between 0 and 100 // the higher, the faster the word is 'decoded' var repeat=20; // if '0' the script does not repeat // if set to a number this is the number of seconds until the script repeats var font=13; // size of font to use var alink="http://www.mf2fm.com/rv"; // place to link to // set to alink="" if not needed /**************************\ The Matrix JavaScripted.. * (c)2003-14 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \**************************/ var weird, table, columns, ma_txt; reveal/=100; var m_coch=new Array(); var m_copo=new Array(); var m_fast=new Array(); var m_comp=0; if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addRVLoadEvent(maytricks); function maytricks() { if (document.getElementById) { var matrix, tbody, tr, td, ts; if (height/2==Math.floor(height/2)) alert("height must be an odd number!"); matrix=document.getElementById("matrix"); ma_txt=matrix.firstChild.nodeValue; ma_txt=" "+ma_txt+" "; columns=ma_txt.length; while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]); for (td=33; td<126; td++) weird+=String.fromCharCode(td); for (td=161; td<255; td++) weird+=String.fromCharCode(td); table=document.createElement("table"); table.cellSpacing=0; ts=table.style; ts.marginLeft="auto"; ts.marginRight="auto"; ts.width=columns(font+1)+"px"; ts.border="none"; tbody=document.createElement("tbody"); for (x=0; x<height; x++) { tr=document.createElement("tr"); for (y=0; y<columns; y++) { td=document.createElement("td"); ts=td.style; ts.width=(font+1)+"px"; ts.height="auto"; ts.font=font+"pt monospace"; ts.textAlign="center"; ts.padding="0px"; ts.backgroundColor="#000000"; ts.color="#000000"; ts.border="none"; td.appendChild(document.createTextNode(String.fromCharCode(160))); tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); matrix.appendChild(table); reset(); }} function reset() { var i, j; m_comp=0; for (i=0; i<columns; i++) { m_fast[i]=speed(0.5+Math.random()); m_copo[i]=0; for (j=0; j<height; j++) { table.rows[j].cells[i].style.color="#000000"; table.rows[j].cells[i].style.textShadow="none"; } newtricks(i); } } function newtricks(c) { var i; if (m_copo[c]==Math.floor(height/2)+1 && m_coch[c]==ma_txt.charAt(c)) { setTimeout("zoomer("+c+")", m_fast[c]); if (++m_comp==columns && repeat) setTimeout("reset()", repeat1000); } else if (m_copo[c]) { if (m_copo[c]<=height) { table.rows[m_copo[c]-1].cells[c].style.color="#ccffcc"; table.rows[m_copo[c]-1].cells[c].style.fontWeight="bold"; } if (m_copo[c]>1 && m_copo[c]<height+2) { table.rows[m_copo[c]-2].cells[c].style.fontWeight="normal"; table.rows[m_copo[c]-2].cells[c].style.color="#33ff33"; } if (m_copo[c]>2 && m_copo[c]<height+3) table.rows[m_copo[c]-3].cells[c].style.color="#00cc00"; if (m_copo[c]>=height && m_copo[c]<2height) table.rows[m_copo[c]-height].cells[c].style.color="#006600"; if (m_copo[c]>height && m_copo[c]<=2height) table.rows[m_copo[c]-height-1].cells[c].style.color="#000000"; if (m_copo[c]++>=2height) m_copo[c]=0; setTimeout("newtricks("+c+")", m_fast[c]); } else { if (Math.random()>0.9) { if (reveal>Math.random() && (m_comp+1)/columns>Math.random()) m_coch[c]=ma_txt.charAt(c); else m_coch[c]=weird.charAt(Math.floor(Math.random()weird.length)); for (i=0; i<height; i++) table.rows[i].cells[c].firstChild.nodeValue=m_coch[c]; m_copo[c]++; m_fast[c]=speed*(0.5+Math.random()); } setTimeout("newtricks("+c+")", m_fast[c]); } } function zoomer(c) { var mtmp, mtem, ytmp; if (m_copo[c]==Math.floor(height/2)+1) { for (ytmp=0; ytmp<height; ytmp++) { mtmp=table.rows[ytmp].cells[c]; mtmp.firstChild.nodeValue=m_coch[c]; mtmp.style.color="#ccffcc"; mtmp.style.fontWeight="bold"; mtmp.style.textShadow="#33ff33 0px 0px 2px"; if (alink) { mtmp.style.cursor="pointer"; mtmp.onclick=function() { window.location.href=alink }; } } mtmp=ma_txt.indexOf(ma_txt.charAt(c)); m_copo[c]+=199; setTimeout("zoomer("+c+")", speed); } else if (m_copo[c]>200) { mtmp=table.rows[m_copo[c]-201].cells[c]; mtem=table.rows[200+height-m_copo[c]].cells[c]; m_copo[c]-=1; mtmp.style.fontWeight="normal"; mtmp.style.color="#33ff33"; mtmp.style.textShadow="none"; mtem.style.fontWeight="normal"; mtem.style.color="#33ff33"; mtem.style.textShadow="none"; setTimeout("zoomer("+c+")", speed); } else if (m_copo[c]==200) m_copo[c]=100+Math.floor(height/2); if (m_copo[c]>100 && m_copo[c]<200) { mtmp=table.rows[m_copo[c]-101].cells[c]; mtmp.firstChild.nodeValue=String.fromCharCode(160); mtem=table.rows[100+height-m_copo[c]].cells[c]; mtem.firstChild.nodeValue=String.fromCharCode(160); m_copo[c]-=1; setTimeout("zoomer("+c+")", speed); } } // ]]> </script> CLICK HERE to select the above script ready to paste it into your clipboard
STEP 2: If you wish, change the settings at the start of the script for your preferred choices.
STEP 3: Place a <div> element with 'id="matrix"' on your web-page containing the text you wish enter the matrix. For example: Don't include anything other than text between the <div> tags.
THAT'S IT When your page loads, the text you placed between between the <div> tags should enter the matrix, like the text at the top of this page.

Copyright notice: All scripts are © copyright mf2fm.com. You can use them wherever and whenever you wish, however the copyright notice at the start of the script should remain intact and a link back to this page would be appreciated. The address for this page is: http://www.mf2fm.com/rv/dhtmlmatrix.php.

This page has been viewed 428 times. It was last viewed on Sun 28 Apr, 2024 at 07:54