Phrase animée : le texte ondule !

Commenter

Contenu du snippet

Voilà un petit script bien sympathique et très usité dans le grand monde qu'est le web !
Comment le personnaliser ?
Très simple ! Il suffit de modifier cette petite partie :
(à la place de "http://www.paroles-et-musiques.fr.st" mettez le texte de votre choix)

function doWave(n){
theText = "http://www.paroles-et-musiques.fr.st";
sizeCycle(theText,1,n);
if (n > theText.length) {n=0}
setTimeout("doWave(" + (n+1) + ")", 25);
}

Source / Exemple : 


<html>

<head>
<title>Texte ondule</title>
<style>BODY {
	BACKGROUND-COLOR: #ffffff
}
A {
	COLOR: navy; TEXT-DECORATION: none
}
A:hover {
	COLOR: red
}
A:visited:unknown {
	COLOR: #808080
}
TD {
	FONT-FAMILY: arial,helvetica; FONT-SIZE: 10pt
}
</style>
<script language="Javascript"> 
<!-- 
function chgdiv(texte){ 
 if (navigator.appName=="Netscape"){ 
  document.layers['text'].document.write(texte); 
  document.layers['text'].document.close(); 
 } 
 else{ 
  text.innerHTML=texte; 
 } 
} 

function nextSize(i,incMethod,textLength){ 
  if (incMethod == 1) return (40*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>"; 
  } 
  chgdiv(output); 
} 

function doWave(n){ 
  theText = "http://www.paroles-et-musiques.fr.st"; 
  sizeCycle(theText,1,n); 
  if (n > theText.length) {n=0} 
  setTimeout("doWave(" + (n+1) + ")", 25); 
} 

//--> 
</script>
<script>
<!--
function highlight(x){
document.form.elements[x].focus();
document.form.elements[x].select();
}
//-->
</script>
</head>

<body bgColor="white" onload="doWave(0);">

<p align="center">&nbsp; <script language="javascript"> 
<!-- 
if (navigator.appName=="Netscape"){document.writeln('<layer name="text" left="10" top="220"></layer>');} 
else{document.writeln('<div id="text" style="position:absolute; left:10 top:220px"></div>');} 
//--> 
</script> <br>
<br>
<br>
&nbsp; </p>
<div id="divZoom"
style="HEIGHT: 19px; LEFT: 7px; POSITION: absolute; TOP: 112px; WIDTH: 773px"></div><div></div>

<p><br>
<font size="+1" face="Comic Sans MS"></p>
</font>
</body>
</html>

Conclusion :


Voilà si y'a des questions (ou des commentaires), je suis là pour répondre ! ;-)

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