Un clic de souris qui fait jaillir du texte....

Commenter

Contenu du snippet

Cliquez et un texte jailli de toutes les couleurs...

Source / Exemple : 


<HTML>
  <HEAD>
  <SCRIPT LANGUAGE="JavaScript">
  var sourisX, sourisY;
var flag = 0;
var posX = new Array();
var posY = new Array();
var isNetscape4 = (document.layers) ? true : false;
var isNetscape6 = !document.all && document.getElementById;
var isNetscape = isNetscape4 || isNetscape6;

var nb_point;
var hauteur = new Array();
var largeur = new Array();
var sens = new Array();
var nb_fois;
var compteur;
var origineY;

function initTrailer(caractere,police,taille,nombre,duree) {
  nb_point = nombre;
  nb_fois = duree/20;

  document.write("<STYLE type=text/css>");
  document.write(".styleTrailer {VISIBILITY: hidden;");
  document.write("FONT-SIZE: "+taille+"px;");
  document.write("FONT-FAMILY: "+police+"; POSITION: absolute;}");
  document.write("</STYLE>");

  for (i=0; i<nb_point; i++) {
    document.write("<SPAN ID='calque"+i+"' CLASS='styleTrailer'>");
    document.write(caractere+"</SPAN>")
  }

  if (isNetscape6)
    document.addEventListener("mousedown",gestionSouris,true);
  else {
    if (isNetscape4)
      document.captureEvents(Event.CLICK);
    document.onmousedown = gestionSouris;
  }
  animationTrailer();
}

function gestionSouris(evenement) {
  if (isNetscape) {
    sourisX = evenement.pageX;
    sourisY = evenement.pageY;
  }
  else {
    sourisX = event.clientX + document.body.scrollLeft;
    sourisY = event.clientY + document.body.scrollTop;
  }

  if (flag == 0) {
    for (i=0; i<nb_point; i++) {
      couleur = "#"+((Math.random()>.5) ? "FF" : "80")
      couleur += ((Math.random()>.5) ? "FF" : "80");
      couleur += ((Math.random()>.5) ? "FF" : "80");
      if (isNetscape4)
        eval('document.layers["calque'+i+'"].color = "'+couleur+'";');
      else if (isNetscape6)
        eval('document.getElementById("calque'+i+'").style.color = "'+couleur+'";');
      else
        eval('document.all.calque'+i+'.style.color = "'+couleur+'";');

      sens[i] = (Math.random()>.5) ? -1 : 1;
      largeur[i] = Math.random()*1.5;
      hauteur[i] = Math.random()*2+1;

      posX[i] = sourisX;
      posY[i] = sourisY;
      visibilite("calque"+i,true);
    }
    compteur = nb_fois;
    origineY = sourisY;
    flag = 1;
  }
}

function animationTrailer() {
  if (flag == 1) {
    for (i=0; i<nb_point; i++) {
      posX[i] = posX[i] + sens[i]*largeur[i];
      posY[i] = origineY + hauteur[i]*((nb_fois-compteur-30)*(nb_fois-compteur-30)/30-30);
    }
    compteur--;
  
    for (i=0; i<nb_point; i++) {
      if (isNetscape4) {
        var calque = eval("document.calque"+i);
        calque.left = posX[i];
        calque.top = posY[i];
      }
      else if (isNetscape6) {
        var calque = eval("document.getElementById('calque"+i+"').style");
        calque.left = posX[i];
        calque.top = posY[i];
      }
      else {
        var calque = eval("calque"+(i)+".style");
        calque.posLeft = posX[i];
        calque.posTop = posY[i];
      }
    }

    if (compteur == 0) {
      for (i=0; i<nb_point; i++)
        visibilite("calque"+i,false);
      flag = 0;
    }
  }

  setTimeout("animationTrailer()",20);
}

function visibilite(calque,etat) {
  if (etat == false)
    etat = (isNetscape4) ? "hide" : "hidden";
  else
    etat = "visible";
  if (isNetscape4)
    eval('document.layers["'+calque+'"].visibility = "'+etat+'";');
  else if (isNetscape6)
    eval('document.getElementById("'+calque+'").style.visibility = "'+etat+'";');
  else
    eval('document.all.'+calque+'.style.visibility = "'+etat+'";');
}

    </SCRIPT>
  </HEAD>
    
    <SCRIPT LANGUAGE=JavaScript>
    </SCRIPT>
  </HEAD>

  <BODY BGCOLOR="blue">
  <Font size=+1, color='White'>Un petit clic pour faire jaillir du texte</font>
    <SCRIPT LANGUAGE=JavaScript>{
      initTrailer("Super", "Arial", 25, 20, 1900);
      }
    </SCRIPT>
  </BODY>
</HTML>

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 (Bitter1)