Créer une page web avec un effet MATRIX !

wolverine5 · Apr 29, 2012

Salut, j'ai réussi a "créer" un effet Matrix en HTML !

Si vous êtes débutant vous ne s'avez pas comment faire donc je vais vous montrez :D

Ouvrez le bloc note puis copier ceci :

<html>
<body text=#167715 bgColor=#000000 onload=writetext()>
<center>
<style type=text/css>.matrix {
padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-botton: 0px; margin: 0px; width: 10px; padding-top: 0px; font-family: Lucida Console, Courier, Monotype; TEXT-ALIGN: center
}
</style>
</center>
<p>
<script language='JavaScript 'type='text/javascript'>

var rows=1; // must be an odd number
var speed=10; // lower is faster
var reveal=2; // between 0 and 2 only. The higher, the faster the word appears
var effectalign="center" //enter "center" to center it.
var w3c=document.getElementById && !window.opera;;
var ie45=document.all && !window.opera;
var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho;
var m_coch=new Array();
var m_copo=new Array();
function matrix() {
if (!w3c && !ie45) return
var matrix=(w3c)?document.getElementById("matrix"):document.all["matrix"];
ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;
ma_txt=" "+ma_txt+" ";
columns=ma_txt.length;
if (w3c) {
while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);
ma_tab=document.createElement("table");
ma_tab.setAttribute("border", 0);
ma_tab.setAttribute("align", effectalign);
ma_tab.style.backgroundColor="#000000";
ma_bod=document.createElement("tbody");
for (x=0; x<rows; x++) {
ma_row=document.createElement("tr");
for (y=0; y<columns; y++) {
matemp=document.createElement("td");
matemp.setAttribute("id", "Mx"+x+"y"+y);
matemp.className="matrix";
matemp.appendChild(document.createTextNode(String.fromCharCode(160)));
ma_row.appendChild(matemp);}
ma_bod.appendChild(ma_row);}
ma_tab.appendChild(ma_bod);
matrix.appendChild(ma_tab);
} else {
ma_tab='<ta'+'ble align="'+effectalign+'" border="0" style="background-color:#000000">';
for (var x=0; x<rows; x++) {
ma_tab+='<t'+'r>';
for (var y=0; y<columns; y++) {
ma_tab+='<t'+'d class="matrix" id="Mx'+x+'y'+y+'"> </'+'td>';}
ma_tab+='</'+'tr>';}
ma_tab+='</'+'table>';
matrix.innerHTML=ma_tab;}
ma_cho=ma_txt;
for (x=0; x<columns; x++) {
ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
m_copo[x]=0;}
ma_bod=setInterval("mytricks()", speed);}
function mytricks() {
x=0;
for (y=0; y<columns; y++) {
x=x+(m_copo[y]==100);
ma_row=m_copo[y]%100;
if (ma_row && m_copo[y]<100) {
if (ma_row<rows+1) {
if (w3c) {
matemp=document.getElementById("Mx"+(ma_row-1)+"y"+y);
matemp.firstChild.nodeValue=m_coch[y];}
else {
matemp=document.all["Mx"+(ma_row-1)+"y"+y];
matemp.innerHTML=m_coch[y];}
matemp.style.color="#33ff66";
matemp.style.fontWeight="bold";}
if (ma_row>1 && ma_row<rows+2) {
matemp=(w3c)?document.getElementById("Mx"+(ma_row-2)+"y"+y):document.all["Mx"+(ma_row-2)+"y"+y];
matemp.style.fontWeight="normal";
matemp.style.color="#00ff00";}
if (ma_row>2) {
matemp=(w3c)?document.getElementById("Mx"+(ma_row-3)+"y"+y):document.all["Mx"+(ma_row-3)+"y"+y];
matemp.style.color="#009900";}
if (ma_row<Math.floor(rows/2)+1) m_copo[y]++;
else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);
else if (ma_row<rows+2) m_copo[y]++;
else if (m_copo[y]<100) m_copo[y]=0;}
else if (Math.random()>0.9 && m_copo[y]<100) {
m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));
m_copo[y]++;}}
if (x==columns) clearInterval(ma_bod);}
function zoomer(ycol) {
var mtmp, mtem, ytmp;
if (m_copo[ycol]==Math.floor(rows/2)+1) {
for (ytmp=0; ytmp<rows; ytmp++) {
if (w3c) {
mtmp=document.getElementById("Mx"+ytmp+"y"+ycol);
mtmp.firstChild.nodeValue=m_coch[ycol];}
else {
mtmp=document.all["Mx"+ytmp+"y"+ycol];
mtmp.innerHTML=m_coch[ycol];}
mtmp.style.color="#33ff66";
mtmp.style.fontWeight="bold";}
if (Math.random()<reveal) {
mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));
ma_cho=ma_cho.substring(0, mtmp)+ma_cho.substring(mtmp+1, ma_cho.length);}
if (Math.random()<reveal-1) ma_cho=ma_cho.substring(0, ma_cho.length-1);
m_copo[ycol]+=199;
setTimeout("zoomer("+ycol+")", speed);}
else if (m_copo[ycol]>200) {
if (w3c) {
mtmp=document.getElementById("Mx"+(m_copo[ycol]-201)+"y"+ycol);
mtem=document.getElementById("Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol);}
else {
mtmp=document.all["Mx"+(m_copo[ycol]-201)+"y"+ycol];
mtem=document.all["Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol];}
mtmp.style.fontWeight="normal";
mtem.style.fontWeight="normal";
setTimeout("zoomer("+ycol+")", speed);}
else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(rows/2);
if (m_copo[ycol]>100 && m_copo[ycol]<200) {
if (w3c) {
mtmp=document.getElementById("Mx"+(m_copo[ycol]-101)+"y"+ycol);
mtmp.firstChild.nodeValue=String.fromCharCode(160);
mtem=document.getElementById("Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol);
mtem.firstChild.nodeValue=String.fromCharCode(160);}
else {
mtmp=document.all["Mx"+(m_copo[ycol]-101)+"y"+ycol];
mtmp.innerHTML=String.fromCharCode(160);
mtem=document.all["Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol];
mtem.innerHTML=String.fromCharCode(160);}
setTimeout("zoomer("+ycol+")", speed);}}
setTimeout('matrix()', 1);
col=0;
function fadein()
{
document.getElementById("fade1").style.color="rgb(" + col + ",0,0)";
document.getElementById("fade2").style.color="rgb(" + col + ",0,0)";
document.getElementById("fade3").style.color="rgb(" + col + ",0,0)";
document.getElementById("fade4").style.color="rgb(" + col + ",0,0)";
document.getElementById("fade5").style.color="rgb(" + col + ",0,0)";
document.getElementById("fade6").style.color="rgb(" + col + ",0,0)";
col+=5;
if(col<255) setTimeout('fadein()', 1);
if(col==255) setTimeout('fadeout()', 1);
}
function fadeout()
{
document.getElementById("fade1").style.color="rgb(" + col + ",0,0)";
document.getElementById("fade2").style.color="rgb(" + col + ",0,0)";
document.getElementById("fade3").style.color="rgb(" + col + ",0,0)";
document.getElementById("fade4").style.color="rgb(" + col + ",0,0)";
document.getElementById("fade5").style.color="rgb(" + col + ",0,0)";
document.getElementById("fade6").style.color="rgb(" + col + ",0,0)";
col-=5;
if(col>0) setTimeout('fadeout()', 1);
if(col==0) setTimeout('fadein()', 1);
}
setTimeout('fadein()', 1);
</script>
<p> </p>
<p><br><br>
</p>
<center>
<div id=matrix>Cheat-gam3.com c'est super :D</DIV>
</span>
</center>
</body>
</html>

Ne vous fiez pas a la taille du code !

Collez donc ce code HTML dans votre bloc note, puis enregistrez le sous et nommer le "matrix.html".

Vous n'avez plus qu'a allez dans l'endroit ou vous l'avez enregistrez vous cliquer dessus et voila ! Votre propre code MATRIX.

Maintenant je vais vous montrez comment modifier le texte et la couleur du texte ou du décor.

Pour modifier le texte chercher cette partie du code :

<div id=matrix>Cheat-gam3.com c'est super :D</DIV>

Ce code se trouve vers la fin.

Vous n'avez plus qu'a modifier "Cheat-gam3.com c'est super :D" par ce que vous voulez ! Modifier juste le texte, pas les BALISES !!

Vous voudriez savoir comment faire pour changer de couleur le texte ou le fond ?
Rien de plus simple allez Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!.

Vous chercher la couleur que vous voulez, puis cliquez sur votre couleur et copiez le code qui commence par #....... .

Vous collez la couleur juste a coter de "text=" <body text=#167715 bgColor=#000000 onload=writetext()>

Pour modifier le fond, vous rechercher votre coleur voulu et vous la coller a coter de bgColor=VOTRE_CODE_COULEUR

Voila j'espere que ce "petit" tutoriel vous aura plu !

N'oubliez pas de mettre merci si ce tutoriel vous a aider !

AzØ¹ · Apr 29, 2012

Merci je cherchais sa justement !

wolverine5 · Apr 29, 2012

Derien :D

n0wPlay · Oct 21, 2012

Trop bon :D

Créer une page web avec un effet MATRIX !

Publicités

Users Who Are Viewing This Thread (Total: 0, Members: 0, Guests: 0)

More options

wolverine5

Membre

AzØ¹

Membre actif

wolverine5

Membre

n0wPlay

Membre