Matrix. Outils webmaster. Trucs et astuces html javascript php pour site internet

MATRIX

Outils pour webmaster. Trucs et astuces en code HTML, JavaScript, PHP : am�liorer son site internet

Descriptif : comme dans le film MATRIX, obtenez ce superbe effet en fond de page.

Exemple : vous �tes en train de le voir.

Mise en oeuvre : S�lectionnez le code ci-dessous (copie automatique dans le presse-papiers) et collez-le dans votre page, code HTML visible.

Entre les deux balises <head> et </head>

Mettez la ligne <div class= "bodycontent"> juste apr�s la balise <body> et la ligne </div><script language="javascript" src="matrix.js" ></script> juste avant la balise </body>

<div class= "bodycontent">
Tout votre code HTML
</div><script language="javascript" src="matrix.js" ></script>

S�lectionnez le code ci-dessous (copie automatique dans le presse-papiers), collez-le dans NotePad et sauvegardez-le sous le nom matrix.js

// MATRIX BACKGROUND ANIMATION // By: BRIAN GOSSELIN OF http://scriptasylum.com // V1.0 // Permission granted to use this script in your webpage provided the // credit remain intact. //GLYPH IMAGE FILE NAMES. var glyphs=['images/matrix/p1.jpg','images/matrix/p2.jpg','images/matrix/p3.jpg','images/matrix/p4.jpg','images/matrix/p5.jpg','images/matrix/p6.jpg','images/matrix/p7.jpg','images/matrix/p8.jpg','images/matrix/p9.jpg','images/matrix/p10.jpg']; var glyphs_b=['images/matrix/p1b.jpg','images/matrix/p2b.jpg','images/matrix/p3b.jpg','images/matrix/p4b.jpg','images/matrix/p5b.jpg','images/matrix/p6b.jpg','images/matrix/p7b.jpg','images/matrix/p8b.jpg','images/matrix/p9b.jpg','images/matrix/p10b.jpg']; var glyphCount=400; // TOTAL NUMBER OF GLYPHS. var scrollSpeed=60; // SPEED OF ANIMATION var glyphD=15; // GLYPH IMAGE WIDTH AND HEIGHT. var disableColors=false; // SET TO true TO DISABLE THE "BRIGHTER" IMAGES (BETTER PREFORMANCE). SET TO false TO ENABLE THEM. //************ DO NOT EDIT BEYOND HERE *************\\ var w3c=(document.getElementById)?true:false; var ns4=(document.layers)?true:false; var ie4=(document.all && !w3c)?true:false; var ie5=(document.all && w3c)?true:false; var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false; var ids=new Array(); var wWidth, wHeight, colHeight; var t=''; var counter=0; var gx=new Array(); var ga=new Array(); for(i=0;i<glyphCount;i++){ gx[i]=Math.floor(Math.random()*glyphs.length); t+=(ns4)?'<layer name="glyph'+i+'" top="-'+glyphD+'" left="0" width="'+glyphD+'" height="'+glyphD+'" z-index="1">':'<div id="glyph'+i+'" style="position:absolute; top:-'+glyphD+'px; left:0px; width:'+glyphD+'px; height:'+glyphD+'px; z-index:1">'; t+='<img src="'+glyphs[gx[i]]+'" width='+glyphD+' height='+glyphD+' name="g'+i+'">'; t+=(ns4)?'</layer>':'</div>'; } document.write(t); for(i=0;i<glyphs.length;i++){ ga[i]=new Image(); ga[i].src=glyphs_b[i]; } function matrixInit(){ getWindowDims(); for(i=0;i<glyphCount;i++){ ids[i]=(ns4)?document.layers['glyph'+i]:(ie4)?document.all['glyph'+i]:document.getElementById('glyph'+i); ids[i].gx=gx[i]; } gx=''; //setInterval('scrollGlyphs()',10*scrollSpeed); scrollGlyphs(); } function brighten(idnum,b){ if(ns4) ids[idnum].document.images['g'+idnum].src=(b)?glyphs_b[ids[idnum].gx]:glyphs[ids[idnum].gx]; else document.images['g'+idnum].src=(b)?glyphs_b[ids[idnum].gx]:glyphs[ids[idnum].gx]; } function moveID(idnum,x,y){ var id=ids[idnum]; if(ns4)id.moveTo(x,y); else{ id.style.left=x+'px'; id.style.top=y+'px'; } if(!disableColors){ brighten(idnum,true); setTimeout('brighten('+idnum+',false)',scrollSpeed*1.3); }} function getWindowDims(){ wWidth=(ie4||ie5)? document.body.clientWidth:window.innerWidth; wHeight=(ie4||ie5)? document.body.clientHeight:window.innerHeight; colHeight=Math.min(Math.floor(wHeight/1.5/glyphD)-1,25); } function scrollGlyphs(){ var sx=(ie4||ie5)? document.body.scrollLeft:window.pageXOffset; var sy=(ie4||ie5)? document.body.scrollTop:window.pageYOffset; var pixx=Math.floor(Math.random()*wWidth/(glyphD+1))*glyphD+sx; var pixy=Math.floor(Math.random()*(wHeight-(colHeight*glyphD)))+sy; for(i=0; i<colHeight; i++){ setTimeout('moveID('+counter+','+pixx+','+(pixy+glyphD*i)+')', scrollSpeed*i); counter=((counter+colHeight)>glyphCount)?0:counter+1; } setTimeout('scrollGlyphs()', scrollSpeed*colHeight/2); } window.onload=matrixInit; window.onresize=getWindowDims;

T�l�chargez les images n�cessaires en cliquant ICI

Remarque : la page HTML, les images, le fichier matrix.js sont configur�s pour fonctionner dans le m�me r�pertoire. Si les chemins sont diff�rent n'oubliez pas de les changer.

Dans le fichier matrix.js :
- glyphs : sont les images ternes qui d�filent.
- glyphs_b : sont les images brillantes qui d�filent.
- glyphsCount : le nombre d'images qui d�filent. Plus de 400 a un meilleur effet mais abaisse les performances.
- scrollSpeed : vitesse de d�filement en millisecondes (1000 millisecondes = 1 seconde).
- glyphD : dimensions de l'image largeur/hauteur.
- disableColors : vous pouvez mettre true pour enlever l'effet de brillance des images et ainsi obtenir une performance plus �lev�e.

Performances : ce script fonctionne avec Netscape4x, Netscape6, Internet Explorer5 et plus. Sur un syst�me Athlon 1.33GHz / 256M DDR RAM / WinXP Pro, IE6 et Netscape 4.78 utilisent seulement 1% des ressources du CPU et environt 11MB de RAM, mais Netscape 6 a besoin d'environt 35% des ressources du CPU et 24MB de RAM (avec la brillance en fonction). Veillez donc � ne pas trop ajouter de glyphs (400 est un chiffre optimum).

L'utilisation de plusieurs scripts dans cette page peut provoquer des erreurs.

Retour