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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 7 889 fois - Téléchargée 28 fois

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

Ajouter un commentaire

Commentaires

Messages postés
8
Date d'inscription
jeudi 15 juillet 2004
Statut
Membre
Dernière intervention
1 février 2006

Niquel, à part que le script est un peu long.
Messages postés
954
Date d'inscription
mardi 11 mai 2004
Statut
Membre
Dernière intervention
11 novembre 2008
2
comment on fait pour que lorsque l'on clique gauche sa ne mette pas le texte?
Messages postés
43
Date d'inscription
vendredi 31 mai 2002
Statut
Membre
Dernière intervention
6 avril 2009

Salut,

C'est assez original, mais si le message doit être plus long; il manquera de lisibilité et de clarté. Certains paramètres doivent pouvoir se changer pour contrer cet inconvénient. En tout cas, bravo pour cette idée originale, surtout à l'approche des fêtes de fin d'année 2003 qui va permettre sur certains sites des messages festifs innatendus.
Bravo et merci.

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.