Encore un effet matrix différent

Contenu du snippet

Effet Matrix, chacun fait une version différente, moi j'ai choisi de faire un fondu avant et aprés le symbole blanc et que les lettres aient un mouvement à peu prés statique. Si vous les voulez totalement statiques, il suffit de remplacer la variable aléatoire de vitesse par une constante. Le gros problème c'est la vitesse, si on met trop de matrice, ça devient vite trés lent ...
PS : si vous voulez accélérer un peu le script (ou le ralentir !) il suffit de modifier la variable "NumMatrix" ! (merci xactionx59)

Source / Exemple :


<html>
<!-- date de creation: 15/06/2003 -->
<head>
<title></title>
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta name="Author" content="delord_19">
<meta name="Generator" content="">
</head>
<script>
var NumMatrix = 10;
var Top = new Array();
var Vit = new Array();
var Left = new Array();
var CARS = new Array('P','*','b','Q','Y','@','S','l','à','D','X','F','c','G','L','å','W','1','w','À');
var turn = 0;
var Buf = '&nbsp;.&nbsp;:&nbsp;[ Matrix 1 . 4 ]&nbsp;:&nbsp;.<br>J\'ai ralongé les matrices et inversé le fondu. Je trouve ça -personnellement- encore plus beau ... en tout cas mon script doit surement pouvoir être accéléré, alors si quelqu\'un se sent l\' âme de le faire il est le bien venu et est prié de bien vouloir me communiquer ses améliorations.<fondu><titre>';
var Txt;

function tableau (n) {
    var nb;
    this.length = n;
    for (var i = 1; i <=n; i++)
        if (i<10)
           {nb = i+"";
            nb = nb.substring(0,1);       
            this[i] = nb;}
   return this;
}
function conversion(couleur) {   
    var reste=1;
    var indice;
    var hexa1;
    var hexa2;
    var couleurHexa;
    tabHex = new tableau(16);
    tabHex[10]="A"; tabHex[11]="B"; tabHex[12]="C"; tabHex[13]="D"; tabHex[14]="E"; tabHex[15]="F";
    indice = 1;
    hexa2 = (couleur%16);
    hexa1 = parseInt(couleur/16);
    hexa2 = tabHex[hexa2];
    if (hexa2 == null)
        hexa2 = "0";
    hexa1 = tabHex[hexa1];
    if (hexa1 == null)
        hexa1 = "0";
    couleurHexa = hexa1 + hexa2;
    return couleurHexa;
}

function Creer() {
var R,V,B;
	for (var k = 0;k<NumMatrix;k++) {
		Vit[k] = Math.round(Math.random()*20)+15;
		var t = Math.round(screen.width/NumMatrix);
		var spaceD = k*t;
		var spaceA = k+1*t;
		Left[k] = Math.round(Math.random()*spaceA)+spaceD;
		Top[k] = Math.round(Math.random()*-600)-400;
		document.write('<div id="Mat'+k+'" style="position:absolute;left:'+Left[k]+'px;top:-400px"><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse">');
		for (var l = 0;l<14;l++) {
			if (l<=7) {
        		V=l/7*255 
        		if (l>=4.5) { 
           		 R=(l-4.5)/3*255; 
           		 B=(l-4.5)/3*255; 
        		} else {
           		 R=0; 
           		 B=0;  
       			}
			}
			if (l>=7) {
				var n = l-7
				var m = 7-n;
				V=m/7*255
				if (m>=4.5) {
				 R=(m-4.5)/3*255;
				 B=(m-4.5)/3*255;
				} else {
				 R=0;
				 B=0;
				}
			}
			document.write('<tr><td><font  size="4" face="Symbol" color="#'+conversion(R)+conversion(V)+conversion(B)+'"><b><div id="char'+l+'a'+k+'">W</div></b></font></td></tr>');
		} 
		document.write('</table></div>');
	}
Move();
}
function Move() {
	for (k=0;k<NumMatrix;k++) {
		Top[k]=Top[k]+Vit[k];
		if (Top[k]>screen.height) {
			Top[k]=Math.round(Math.random()*-600)-400;
			Vit[k]=Math.round(Math.random()*15)+10;
			Left[k]=Math.round(Math.random()*screen.width);
			eval("document.all.Mat"+k+".style.left=Left[k]+'px';");
		}
		eval("document.all.Mat"+k+".style.top=Top[k]+'px';");
		for (l=0;l<14;l++) {
			Letr = turn+l;
			if (Letr>=14) Letr-=14;
			eval("document.all.char"+l+"a"+k+".innerHTML='"+CARS[Letr]+"';");
		}
	}
turn++;
if (turn==14) turn=0;
setTimeout('Move()',1);
}

function AddCAR() {   
    var ReDoAddCar=1; 
    if (Buf.substr(0,4)=="<br>") {   
        document.all.txt.innerHTML=document.all.txt.innerHTML+"<br><p>"; 
        Buf=Buf.substr(4) 
    } else {
        if (Buf.substr(0,6)=="&nbsp;") {   
            document.all.txt.innerHTML=document.all.txt.innerHTML+"&nbsp;";    
            Buf=Buf.substr(6)  
        } else {   
            if (Buf.substr(0,5)=="<cls>") {   
                document.all.txt.innerHTML="";
                Buf=Buf.substr(5)
            } else {
                if (Buf.substr(0,7)=="<fondu>") {   
                    Txt=document.all.txt.innerHTML;
                    Buf=Buf.substr(7)
                    FonduLev=255;
                    doRapid_Fondu_noir();
                    ReDoAddCar=0;
                 } else {
				     if (Buf.substr(0,7)=="<titre>") {
						document.all.txt.innerHTML="";
						Buf="";
						FonduLev = 0;
						titre();
                     } else {
                        document.all.txt.innerHTML=document.all.txt.innerHTML+Buf.substr(0,1);  
                        Buf=Buf.substr(1);
                    }
                }
            }
        }
    }
    if (ReDoAddCar==1) {setTimeout("AddCAR()", Math.round(Math.random()*1)+40);} 
}
function doRapid_Fondu_noir() {   
    document.all.txt.innerHTML="<font color=\"00" + conversion(FonduLev) + "00\">" + Txt + "</font>";
    FonduLev=FonduLev-10;   
    if (FonduLev>0) {setTimeout("doRapid_Fondu_noir()", 41);} else {
        document.all.txt.innerHTML="";
        setTimeout("AddCAR()", Math.round(Math.random()*1)+1);
    }
}
function titre() {
document.all.txt.innerHTML="<center><b><font color=\"00" + conversion(FonduLev) + "00\" size=6>.&nbsp;:&nbsp;[&nbsp;M&nbsp;a&nbsp;t&nbsp;r&nbsp;i&nbsp;x&nbsp;&nbsp;1&nbsp;.&nbsp;4&nbsp;]&nbsp;:&nbsp;.</font></b><br><font color=\"00" + conversion(FonduLev) + "00\">Par delord_19</font></center>";
FonduLev=FonduLev+5;
if (FonduLev<256) {setTimeout("titre()", 20);}
}
setTimeout("AddCAR()", 1);
</script>
<body text="#00FF00" bgcolor="black" scroll="no" style="cursor:crosshair">
<font face="Courier New"><div id="txt" style="position:absolute;width:100%"> </div></font>
</body>
<script>
Creer();
</script>
</html>

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.