Effet matrix

Soyez le premier à donner votre avis sur cette source.

Vue 24 826 fois - Téléchargée 1 539 fois

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.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
2
Date d'inscription
lundi 13 septembre 2004
Statut
Membre
Dernière intervention
23 septembre 2004

Merci, pour tes réponses et pour la solution.
J'ai une autre petite question, est ce qu'il y a la possibilité d'afficher la barre de défilement, car quand je place ton code sur une page, je n'ai plus la barre de défilement, du coup je ne vois que la partie haute de la page.
Merci encore!!!
Messages postés
19
Date d'inscription
dimanche 2 mars 2003
Statut
Membre
Dernière intervention
6 septembre 2004

Pour les rectangles c'est normal, c'est parce que sur ta deuxième machine les caractères asiatiques n'étaient pas gérés. Tu as deux solution :
- Soit tu instanle les polices asiatiques sur ton ordinateur (normalement dès qu'il en a besoin ton navigateur internet te demande si tu veux instanler telle ou telle police afin que la page s'affiche correctement).
- Soit tu ne fait afficher à l'effet que les caractères de la table ASCII. Pour faire cela c'est très simple. Il y a deux ligne dans le code qui sont identiques et qui ont la syntaxe suivante :
"num_lettre = 19968 + Math.floor(Math.random()*5000);"
Il te suffit de remplacer 19968 par 32 et 5000 par 234.
Pour ce qui est des ralentissements cela doit venir de la puissance de ta machine. En effet le Javascript est TRES gourmant en ressource machine, notamment en ce qui concerne la concaténation des chaines de caractères qui sont légions dans mon programme. J'ai essayé d'optimiser le code mais c'est assez difficile car il me faut utiliser des fonctions très spéciales.
Enfin pour java c'est normal que cela ne te change rien étant donné que mon script est en javascript et non en java. Même si les noms se ressembles ces deux langages n'ont rien à voir (il y a autant de différences voir plus avec java qu'avec le C ou le C++).
Messages postés
2
Date d'inscription
lundi 13 septembre 2004
Statut
Membre
Dernière intervention
23 septembre 2004

Bonjour, je trouve ce script vraiment très bien fait. Mais j'ai un petit probleme je l'ai essayé sur 2 machine différentes et sur la première ça marche très bien mais sur la deuxième j'ai des des petit rectangle au lieu des caractère chinois et c'est tres lent. je n'est pas de connexion internet sur cet ordinateur est ce que quelqu'un saurait d'ou vient le problème en sachant que j'ai installé java 2 Runtime Environnement et que ça n'a rien changé. Merci de vos réponse.
Messages postés
1
Date d'inscription
samedi 3 juillet 2004
Statut
Membre
Dernière intervention
3 juillet 2004

Bonjour,

J'aimerai bien mettre cet effet Matrix en fond d'écran mais je ne sais pas comment faire. Mon site est http://www.actujeuxvideo.com !

Aidez-moi, svp !
Messages postés
121
Date d'inscription
samedi 15 mai 2004
Statut
Membre
Dernière intervention
10 mars 2006

Mais non je parlais du truc bizarre dont a parlé panpan...

Et il a donné une adresse pour voir cet "effet bizarre"...
C'a n'a aucun lien avec ta source !!
Afficher les 28 commentaires

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)