Franc83

Texte Waves

18-07-2008

Effets de textes javascript

Texte ondulant

Exemple :

Le javascript :

<body onload="doWave(0)">
<script language="JavaScript">
var theText = "Bienvenue chez Franc83";
function nextSize(i,incMethod,textLength)
{
if (incMethod == 1) return (50*Math.abs( Math.sin(i/(textLength/3.14))) );
if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
}
function sizeCycle(text,method,dis)
{
output = "";
for (i = 0; i < text.length; i++)
{
size = parseInt(nextSize(i +dis,method,text.length));
output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
}
theDiv.innerHTML = output;
}
function doWave(n)
{
sizeCycle(theText,1,n);
if (n > theText.length) {n=0}
setTimeout("doWave(" + (n+1) + ")", 50);
}
</script>

<div ID="theDiv" align="center">
</div>

En rouge , l'insertion HTML à effecuter

En noir le javascript

Réglages :

Avec la ligne :

- if (incMethod == 1) return (50*Math.abs( Math.sin(i/(textLength/3.14))) ); Vous réglez la taille maximum des caratères

- setTimeout("doWave(" + (n+1) + ")", 40); Vous réglez la vitesse d'ondulation de la phrase, le (n+1) réglant le pas d'augmentation des lettres

- sizeCycle(theText,2,n); Vous avez le choix entre les deux méthodes d'incrémentation, sinus ou cosinus du début du script, la 1 ou la 2

Dans le même esprit
Boîtes cachées Bulles d'aide FAQ cachée Texte Tremblant Objets draguables Texte choc Texte Fader Texte Feu Texte Glossy Texte Glossy 2 Texte Matrix Texte Néon Titre Waves Texte Mitraillette Texte Multicolore Texte Spirale Gradient coloré Zoom Texte

Citez cet article

Commenter cet article

Commenter
Les messages comportant des attaques verbales contre les personnes seront supprimés. Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur. Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
Nom
E-mail
Site web
Titre
BBCode:
Commentaire
Code:*
	Je désire être prévenu par mail des commentaires qui suivront