Le texte ondulant

 

Ah que voilà un gadget inutile ..... mais qui va faire plaisir aux amateurs :

Avez-vous le mal de mer ?

Si c'est le cas (le mal de mer), quittez vite cette page : vous risquez de souiller votre clavier !

Pour ceux qui restent, voici le script :

<P><FONT FACE="arial" COLOR="red">

<SCRIPT LANGUAGE=JavaScript>var phrase = "Avez-vous le mal de mer ?";

function taille(x,etat,longueur)

{

if (etat == 1) return (65*Math.abs( Math.sin(x/(longueur/3.21))));

if (etat == 2) return (325*Math.abs( Math.cos(x/(longueur/3.21))));

}

 function cycle(texte,systeme,total)

{

output = "";

for (x = 0; x< texte.length; x++)

{

size = parseInt(taille(x +total,systeme,texte.length));

output += "<font style='font-size: "+ dimension +"pt'>" +texte.substring(x,x+1)+ "</font>";

}

contenu.innerHTML = output;

}

 function vague(n)

{

cycle(phrase,1,n);

if (n > phrase.length) {n=0}

setTimeout("vague(" + (n+1) + ")", 65);

}

</SCRIPT> <div ID="contenu" align="center"> </div></FONT></P>

Celui que j'ai installé comme exemple en haut de page est inséré dans un tableau ; je ne vous en retranscris pas les paramètres : si vous avez suivi les exposés jusqu'ici, vous savez les réaliser !

Voyons les éléments marquants de ce script :

 

nous écrivons une variable phrase qui contiendra le texte.

taille est la 1ère fonction : je vous fais grâce d'un cours de mathématiques, ce n'est pas l'endroit ...

cycle déterminera le mouvement en fonction de la dimension des caractères calculée par taille.

vague sera la fonction déterminant la durée en temps de chaque cycle de l'évènement.

le [div] affichera ensuite le résultat, sous la forme que vous voyez.

Ah ! j'allais oublier : vous installez tout cela entre les balises BODY !

Modifiez les variables de calcul et la longueur du texte : pas mal de possibilités s'offrent à vous !

Mais accrochez-vous au bastingage : l'écran peut devenir houleux ... !