Effet matrix

Télécharger le projet
Commenter

Description

Ce code génère un effet à la matrix : des lettres descendent verticalement de l'écran. La vitesse est presque potable.

Source / Exemple : 


<html>
<head>
<style>
	BODY {
		cursor:default;
	}
</style>
<script langage="Javascript">
	var nbr_col = 57;//nombre de colonnes
	var nbr_car = 28;//nombres de lignes(nombre de caractères par colonne)
	
	var nbr_degrade = 10;//nombre de couleur dans le dégradé du noir vers le blanc en passant par le vert
	var coul_deg = new Array(nbr_degrade);//tableau qui contient les couleur du dégradé
	coul_deg[0]="#003300";coul_deg[1]="#006600";coul_deg[2]="#009900";coul_deg[3]="#00CC00";coul_deg[4]="#00FF00";
	coul_deg[5]="#33FF33";coul_deg[6]="#66FF66";coul_deg[7]="#99FF99";coul_deg[8]="#CCFFCC";coul_deg[9]="#FFFFFF";

	var nbr_car_aff = new Array(nbr_col);//indique combien de caractèers on doit afficher dans une colonne(nombre de lignes)
	var matrice = new Array(nbr_col);

	for (a=0 ; a<nbr_col ; a++)
		matrice[a] = new Array(nbr_car);
	
	for (a=0 ; a<nbr_col ; a++)
		for (b=0 ; b<nbr_car ; b++)
			{
				strtemp = "";
				num_lettre = 19968 + Math.floor(Math.random()*5000);
				strtemp = "&#" + num_lettre + "; ";
				matrice[a][b] = strtemp;
			}
	
	for (a=0 ; a<nbr_col ; a++)
		nbr_car_aff[a] = 10000;

	function aff()
	{
		var num_deg;
		var strtemp;

		for (a=0 ; a<nbr_col ; a++)
		{
			if (nbr_car_aff[a] > nbr_car + nbr_degrade)
			 {
				nbr_car_aff[a] = Math.floor(Math.random()*4*nbr_car) - 5*nbr_car;
				for (b=0 ; b<nbr_car ; b++)
				{
					strtemp = "";
					num_lettre = 19968 + Math.floor(Math.random()*5000);
					strtemp = "&#" + num_lettre + "; ";
					matrice[a][b] = strtemp;
				}
				document.getElementById("col" + a).style.pixelTop = -23;
				document.getElementById("col" + a).innerHTML = "";
			}
			else
				nbr_car_aff[a] ++;

			if (nbr_car_aff[a] > nbr_degrade)
				document.getElementById("col" + a).style.pixelTop += 23;
				
			if (nbr_car_aff[a] >0)
			{
				num_deg = nbr_car_aff[a]-nbr_degrade;
				strtemp = "";
				for (b=0 ; b<nbr_degrade ; b++)
				{
					if ((num_deg >= 0)&&(num_deg<=nbr_car-1))
						strtemp += "<font Color=" + coul_deg[b] + ">" + matrice[a][num_deg] + "</font>";
					num_deg++;
				}
				document.getElementById("col" + a).innerHTML = strtemp;
			}

		}
	}

function select(){
	function disableselect(e){return false}
	function reEnable(){return true}
	document.onselectstart=new Function ("return false")
	if (window.sidebar){
		document.onmousedown=disableselect
		document.onclick=reEnable
	}
}

</script>
</head>
<body text="#FFFFFF" bgcolor="#000000" OnLoad="select()" scroll="no">
<div id="label" style="position: absolute; left: 200px; top: 10px"></div>
<script langage="Javascript">
	for(a=0 ; a<nbr_col ; a++)
		document.write('<DIV STYLE="position: absolute; width: 10px; height: 800px; top: 0px; left: ' + a*16 + 'px" ID="col' + a + '"></DIV>');
	clkid = setInterval("aff();", 10);
</script>
</body>
</html>

Conclusion :


C'est mon premier code sur ce site, je ne l'ai pas beaucoup commenté.
Si vous ne copiez que le code ci-dessus, je vous conseille de mettre la page contenant ce code dans un frame dont la hauteur et la largeur sont égales à 100% avec l'option scrolling="no" (cela enlèvera les barres de scrolling).
Résolution conseillée : 1028 X 768.
J'ai regardé ce que cela dnnait avec Netscape, étant donné que cela fait pitié à voir j'ai décidé d'intégrer le tab scroll à la balise body comme cela m'a été conseillé. Plus besoin de frame donc.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (undine)