DevKB
Web Development Knowledge Base
HOME | TOP 20 | WRITE AN ARTICLE |
Sections :



RSS RSS Feed

You too, please publish your useful code snippets in any programming language :
write an article !

Valid HTML 4.0 Transitional

Plateforme d'envoi de gros fichiers en ligne
Dépannage site web
Blog infogérance
Hébergement e-mail
Aurélie Dufour - - 02/04/2008 - vue 7785 fois

Texte ondulant en Javascript : effet animé comme dans Flash

Une fonction Javascript qui permet de faire onduler du texte, comme s'il faisait des vagues, et sans Flash, c'est possible ! :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Un texte qui fait des vagues !</title>
<script type="text/javascript">
//le texte que vous souhaitez afficher :
var theText = "Le Javascript, c'est cool !";

//fonction qui retourne la taille d'un caractère du texte et sa position
//pour changer la taille du texte, modifiez le nombre "72" par ce que vous voulez
function nextSize(i,textLength)
{
	return (72*Math.abs( Math.sin(i/(textLength/3.14))));
}

//fonction qui qui fait changer la taille des caractères au fur et à mesure
function sizeCycle(text,dis)
{
	output = "";
	for(i=0;i<text.length;i++)
	{
		size = parseInt(nextSize(i+dis,text.length));
		output += "<font style='font-size: "+ size +"pt'>"+text.substring(i,i+1)+"</font>";
	}
	document.getElementById('theDiv').innerHTML = output;
}

//fonction pour l'animation finale
function doWave(n)
{
	sizeCycle(theText,n);
	if(n > theText.length)n=0;
	setTimeout("doWave(" + (n+1) + ")", 50);
}
</script>
</head>

<body onload="doWave(0);">
	<div id="theDiv" style="text-align: center">
	</div>
</body>
</html>

(D'après C. Nilly et J-C Gigniac, "Le poche Javascript ", éditions Micro Application)



Write a comment :
Your name :     E-mail (optional) :

AntiSpam : what animal is visible on this picture ? :

Nos partenaires : iPhone 8 Cases & Protection