The MATRIX Re-Scripted
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0+ and Opera 8+. It only works with Opera 7+ when not served as XML.
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
<style type="text/css"> .matrix { width:11px; font:11pt Lucida Console, Courier, monospace; text-align:center; padding:0px; background-color:#000 } </style> <script type="text/javascript"> // <![CDATA[ var height=11; // height of the effect in rows - must be an odd number var speed=66; // lower is faster var reveal=33; // between 0 and 100 // the higher, the faster the word is 'decoded' var repeat=0; // if '0' the script does not repeat // if set to a number this is the delay until the script repeats var alink="http://www.mf2fm.com/rv"; // place to link to // set to alink="" if not needed /***************************\ * The Matrix JavaScripted.. * *(c) 2003-6 mf2fm web-design* * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \***************************/ var timer, table, x, y, columns, ma_txt, ma_cho; reveal/=100; var m_coch=new Array(); var m_copo=new Array(); window.onload=function() { if (document.getElementById) { var matrix, tbody, tr, td; 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]); table=document.createElement("table"); table.cellSpacing=0; table.style.margin="auto"; table.style.width="auto"; tbody=document.createElement("tbody"); for (x=0; x<height; x++) { tr=document.createElement("tr"); for (y=0; y<columns; y++) { td=document.createElement("td"); td.className="matrix"; td.appendChild(document.createTextNode(String.fromCharCode(160))); tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); matrix.appendChild(table); ma_cho=ma_txt; for (x=0; x<columns; x++) { m_copo[x]=0; ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94)); } x=0; timer=setInterval("mytricks()", speed); }} function mytricks() { var mtmp, mrow; var z=x; x=0; for (y=0; y<columns; y++) { x=x+(m_copo[y]==100); mrow=m_copo[y]%100; if (mrow && m_copo[y]<100) { if (mrow<height+1) { mtmp=table.rows[mrow-1].cells[y]; mtmp.firstChild.nodeValue=m_coch[y]; mtmp.style.color="#33ff66"; mtmp.style.fontWeight="bold"; } if (mrow>1 && mrow<height+2) { mtmp=table.rows[mrow-2].cells[y]; mtmp.style.fontWeight="normal"; mtmp.style.color="#00ff00"; } if (mrow>2) table.rows[mrow-3].cells[y].style.color="#009900"; if (mrow<Math.floor(height/2)+1) m_copo[y]++; else if (mrow==Math.floor(height/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y); else if (mrow<height+2) m_copo[y]++; else if (m_copo[y]<100) m_copo[y]=0; } else if (Math.random()>0.9 && m_copo[y]<100) { if (reveal>Math.random() && (z+1)/columns>Math.random()) m_coch[y]=ma_cho.charAt(y); else m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length)); m_copo[y]++; } } if (x==columns) { if (repeat) { ma_cho=ma_txt; for (x=0; x<columns; x++) { m_copo[x]=0; ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94)); } } else clearInterval(timer); } } function zoomer(ycol) { var mtmp, mtem, ytmp; if (m_copo[ycol]==Math.floor(height/2)+1) { for (ytmp=0; ytmp<height; ytmp++) { mtmp=table.rows[ytmp].cells[ycol]; mtmp.firstChild.nodeValue=m_coch[ycol]; mtmp.style.color="#33ff66"; mtmp.style.fontWeight="bold"; if (alink) { mtmp.style.cursor="pointer"; mtmp.onclick=function() {window.location.href=alink}; } } mtmp=ma_cho.indexOf(ma_txt.charAt(ycol)); m_copo[ycol]+=199; setTimeout("zoomer("+ycol+")", speed); } else if (m_copo[ycol]>200) { mtmp=table.rows[m_copo[ycol]-201].cells[ycol]; mtem=table.rows[200+height-m_copo[ycol]].cells[ycol]; m_copo[ycol]-=1; mtmp.style.fontWeight="normal"; mtem.style.fontWeight="normal"; setTimeout("zoomer("+ycol+")", speed); } else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(height/2); if (m_copo[ycol]>100 && m_copo[ycol]<200) { mtmp=table.rows[m_copo[ycol]-101].cells[ycol]; mtmp.firstChild.nodeValue=String.fromCharCode(160); mtem=table.rows[100+height-m_copo[ycol]].cells[ycol]; mtem.firstChild.nodeValue=String.fromCharCode(160); m_copo[ycol]-=1; setTimeout("zoomer("+ycol+")", speed); } } // ]]> </script> </head> <body> <br /> <form name="dhtml" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <table align="center"> <tr> <th><div id="matrix">The MATRIX Re-Scripted</div></th> </tr> <tr> <td><img src="/gif/xml.gif" width="60" height="22" align="right" style="margin-left:3px" alt="xml compliant" />This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0+ and Opera 8+. It only works with Opera 7+ when not served as XML.</td> </tr> <tr> <td class="update"><b>22-Sep-2005</b>: Internet Explorer 4 support removed. Made XML compliant.</td> </tr> <tr> <td><b>STEP 1:</b> Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page<br /> <br /><textarea style="width:580px" rows="40" cols="80" name="head"><?php $thispage=file_get_contents($_SERVER['SCRIPT_FILENAME']); $start=strpos($thispage, "<script"); $end=strpos($thispage, "</script>", $start); $script=substr($thispage, $start, $end-$start+9); $start=strpos($thispage, "<style"); $end=strpos($thispace, "</style>"); $style=substr($thispage, $start, $end-$start+8); echo htmlspecialchars("$style\n$script"); ?></textarea><br /> <br /><a href="javascript:document.forms['dhtml'].head.select()">CLICK HERE</a> to select the above script ready to paste it into your clipboard</td> </tr> <tr> <td><b>STEP 2:</b> If you wish, change the 'font', 'width' and 'background-color', alter the details between the '<style>' tags. If you make the font bigger, it is important to increase the width too, otherwise the effect will look a bit screwy!</td> </tr> <tr> <td><b>STEP 3:</b> Place a <div> element with 'id="matrix"' on your web-page containing the text you wish enter the matrix. For example:<br /> <br /><input type="text" style="width:580px" value="<div id="matrix">MATRIX Re-Scripted</div>" /><br /> <br /><u <script type="text/javascript"> // <![CDATA[ var height=11; // height of the effect in rows - must be an odd number var speed=66; // lower is faster var reveal=33; // between 0 and 100 // the higher, the faster the word is 'decoded' var repeat=0; // if '0' the script does not repeat // if set to a number this is the delay until the script repeats var alink="http://www.mf2fm.com/rv"; // place to link to // set to alink="" if not needed /***************************\ * The Matrix JavaScripted.. * *(c) 2003-6 mf2fm web-design* * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \***************************/ var timer, table, x, y, columns, ma_txt, ma_cho; reveal/=100; var m_coch=new Array(); var m_copo=new Array(); window.onload=function() { if (document.getElementById) { var matrix, tbody, tr, td; 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]); table=document.createElement("table"); table.cellSpacing=0; table.style.margin="auto"; table.style.width="auto"; tbody=document.createElement("tbody"); for (x=0; x<height; x++) { tr=document.createElement("tr"); for (y=0; y<columns; y++) { td=document.createElement("td"); td.className="matrix"; td.appendChild(document.createTextNode(String.fromCharCode(160))); tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); matrix.appendChild(table); ma_cho=ma_txt; for (x=0; x<columns; x++) { m_copo[x]=0; ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94)); } x=0; timer=setInterval("mytricks()", speed); }} function mytricks() { var mtmp, mrow; var z=x; x=0; for (y=0; y<columns; y++) { x=x+(m_copo[y]==100); mrow=m_copo[y]%100; if (mrow && m_copo[y]<100) { if (mrow<height+1) { mtmp=table.rows[mrow-1].cells[y]; mtmp.firstChild.nodeValue=m_coch[y]; mtmp.style.color="#33ff66"; mtmp.style.fontWeight="bold"; } if (mrow>1 && mrow<height+2) { mtmp=table.rows[mrow-2].cells[y]; mtmp.style.fontWeight="normal"; mtmp.style.color="#00ff00"; } if (mrow>2) table.rows[mrow-3].cells[y].style.color="#009900"; if (mrow<Math.floor(height/2)+1) m_copo[y]++; else if (mrow==Math.floor(height/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y); else if (mrow<height+2) m_copo[y]++; else if (m_copo[y]<100) m_copo[y]=0; } else if (Math.random()>0.9 && m_copo[y]<100) { if (reveal>Math.random() && (z+1)/columns>Math.random()) m_coch[y]=ma_cho.charAt(y); else m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length)); m_copo[y]++; } } if (x==columns) { if (repeat) { ma_cho=ma_txt; for (x=0; x<columns; x++) { m_copo[x]=0; ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94)); } } else clearInterval(timer); } } function zoomer(ycol) { var mtmp, mtem, ytmp; if (m_copo[ycol]==Math.floor(height/2)+1) { for (ytmp=0; ytmp<height; ytmp++) { mtmp=table.rows[ytmp].cells[ycol]; mtmp.firstChild.nodeValue=m_coch[ycol]; mtmp.style.color="#33ff66"; mtmp.style.fontWeight="bold"; if (alink) { mtmp.style.cursor="pointer"; mtmp.onclick=function() {window.location.href=alink}; } } mtmp=ma_cho.indexOf(ma_txt.charAt(ycol)); m_copo[ycol]+=199; setTimeout("zoomer("+ycol+")", speed); } else if (m_copo[ycol]>200) { mtmp=table.rows[m_copo[ycol]-201].cells[ycol]; mtem=table.rows[200+height-m_copo[ycol]].cells[ycol]; m_copo[ycol]-=1; mtmp.style.fontWeight="normal"; mtem.style.fontWeight="normal"; setTimeout("zoomer("+ycol+")", speed); } else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(height/2); if (m_copo[ycol]>100 && m_copo[ycol]<200) { mtmp=table.rows[m_copo[ycol]-101].cells[ycol]; mtmp.firstChild.nodeValue=String.fromCharCode(160); mtem=table.rows[100+height-m_copo[ycol]].cells[ycol]; mtem.firstChild.nodeValue=String.fromCharCode(160); m_copo[ycol]-=1; setTimeout("zoomer("+ycol+")", speed); } } // ]]> </script>
CLICK HERE
to select the above script ready to paste it into your clipboard
STEP 2:
If you wish, change the 'font', 'width' and 'background-color', alter the details between the '<style>' tags. If you make the font bigger, it is important to increase the width too, otherwise the effect will look a bit screwy!
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.
No menu on the left?
Click here
for a full list of all the free DHTML and Javascript effects you could be using on your web-site!
Interested in learning more about JavaScript, CSS, HTML/XHTML/XML and PHP programming? I would highly recommend the following books...
[ This page viewed 3437 times. Last viewed Tue 13 May, 2008 at 17:33 ]
