Web Development Knowledge Base
| |
Sections :
RSS Feed You too, please publish your useful code snippets in any programming language : write an article ! 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 7761 fois
Texte ondulant en Javascript : effet animé comme dans FlashUne 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) |
Nos partenaires : iPhone 8 Cases & Protection |