Outils et ressources pour site web
Les javascripts

Texte qui danse et tombe

DESCRIPTION :

Un texte coloré arrive en dansant puis s'écroule sur la page.

EXEMPLE :

> Voir l'exemple

COMMENTAIRES :

Totalement configurable , toutes les explications sont dans le script.

Auteur : Dudli and Peter Gehrig - www.24fun.ch

CODE DU SCRIPT

-Insérer entre les balises <HEAD> et </HEAD> :

<script>
<!-- Beginning of JavaScript -
// CREDITS:
  // TextRapper by Urs Dudli and Peter Gehrig 
  // Copyright (c) 1999 Peter Gehrig and Urs Dudli. All rights reserved.
  // Permission given to use the script provided that this notice remains as is.
  // Additional scripts can be found at http://www.24fun.ch.
  // info@24fun.ch
  // 1/7/2000
  
// IMPORTANT: 
  // If you add this script to a script-library or script-archive 
  // you have to add a link to http://www.24fun.ch on the webpage 
  // where this script will be running.
  
 // INSTRUCTIONS:
  // Configure the script as follows:
  // 
  // Configure the content of our messages.
  // You may use as many messages as you like.
  // ATTENTION: Long messages will slow down the script.
  // ATTENTION: Don't forget to copy and paste the script-block below the <body>tag
  // ATTENTION: Don't forget to copy and paste the style-block over the<body>tag
  
var mes = new Array()
  mes[0]="mettez votre message ici"
  mes[1]="mettez votre message ici"
  mes[2]="mettez votre message ici"
  mes[3]="mettez votre message ici"
  //vous pouvez en rajouter mais sans oublier de mettre 5,6...à droite 
  
// The path array contains the path of the newsworm. How can you configure this path? Best way:
  // 1. Produce an empty (white) gif-image with your graphic-tool, size about 1000x800 pixels.
  // 2. Open the application that you are using to create imagemaps (for instance CuteMAP).
  // 3. Open this gif-image.
  // 4. Set the drawing-tool to "polygon".
  // 5. Draw a path.
  // 6. Copy and paste the resulting values (x,y coordinates) inside the path-array below. 
  // ATTENTION: There should be no space between the numbers!!!
  var path= new Array(554,9,552,10,550,13,542,13,538,13,532,10,528,9,528,9,522,7,519,8,512,9,510,11,507,13,505,16,500,17,495,18,492,17,488,15,482,9,477,9,473,9,466,12,461,17,459,19,452,20,448,21,443,18,439,15,434,9,431,9,424,8,419,9,416,11,412,12,410,15,408,17,406,19,398,19,391,20,383,19,379,17,372,14,369,10,364,9,356,7,348,8,340,9,334,11,323,13,315,17,301,18,293,17,288,12,285,10,278,7,274,7,269,9,268,9,265,12,260,17,250,17,241,17,229,16,220,10,216,9,213,9,208,9,203,9,194,14,188,16,177,16,166,16,157,14,149,13,146,8,135,7,124,6,114,9,104,14,94,16,69,16,61,15,41,15,34,15,22,16,12,16,13,15)
  
// How many seconds shall the textsnake dance up and down when reaching its final position?
  var stoptime=2
  //combien de seconde le texte restera en haut en dansant
  
// Choose fontfamily, fontsize
  var textfont="Arial"
  var textsize=16
  //choisir le format et la taille du texte
  
// Configure a selction of of textcolors (as many as you like)
  var textcolor=new Array("FF0000","0000FF","00FF00","FF00FF")
  
// Fontweight: 1 for bold, 0 for normal
  var fontweight=1
  
// Set 1 to apply a trendy glow-effect
  // Set 0 to apply no glow effect
  // ATTENTION: the glow-effect will slow down the speed dramatically
  var gloweffect=0
  
// The space (pixels) between the letters. If you have chosen a big fontsize 
  // you should increase this number
  var letterspace=12
  //l'espace en pixels entre chaque lettre
  
// // INSTRUCTIONS:
  // End of instructions part. No need to change the variables below.
  // 
  var tickerleft=path[path.length-2]
  var tickertop=path[path.length-1]
  var timer
  var finalxpos=tickerleft
  var i_mes=0
  var message=""
  var i_path=0
  var stoptimemilli=stoptime*10
  var maxtextlength=0
  var i_endposition=0
  
var pathx= new Array()
  var ii=0
  for (i=0;i<=path.length-1;i=i+2) {
  pathx[ii]=path[i]
  ii++
  }
  ii=0
  var pathy= new Array()
  for (i=1;i<=path.length-1;i=i+2) {
  pathy[ii]=path[i]
  ii++
  }
  
if (gloweffect==1) {
  gloweffect="style='filter:glow(strength=1,color=yellow)'"
  }
  else {
  gloweffect=""
  }
  
if (fontweight==1) {
  fontweight="<b>"

}
  else {
  fontweight=""
  }

for (i=0;i<=mes.length-1;i++) {
  if (mes[i].length>=maxtextlength) {maxtextlength=mes[i].length}
  }
  
for (i=0;i<=mes.length-1;i++) {
  mes[i]=mes[i]+" "
  }
  
if (document.layers) {
  if (textsize>20) {textsize=6}
  else if (textsize>20) {textsize=5}
  else if (textsize>14) {textsize=4} 
  else if (textsize>10) {textsize=3}
  else if (textsize>8) {textsize=2}
  else if (textsize<=7) {textsize=1}
  }
  
var xpos=new Array()
  for (i=0;i<=maxtextlength;i++) {
  xpos[i]=5000
  }
  
var ypos=new Array()
  for (i=0;i<=maxtextlength;i++) {
  ypos[i]=5000
  }
  
function randomizer(range) { 
  return Math.floor(range*Math.random())
  }
  
function makesnake() {
  if (i_path<=pathx.length-1) {
  for (i=message.length-1; i>=1; i--) {
  xpos[i]=xpos[i-1]
  ypos[i]=ypos[i-1]
  }
  xpos[0]=pathx[i_path]
  ypos[0]=pathy[i_path]
  if (document.all) {
  for (i=0; i<message.length-1; i++) {
  var thisspan = eval("document.all.span"+(i)+".style")
  thisspan.posLeft=xpos[i]+(i*letterspace)
  thisspan.posTop=ypos[i]
  }
  }
  if (document.layers) {
  for (i=0; i<message.length-1; i++) {
  var thisspan = eval("document.span"+i)
  thisspan.left=xpos[i]+(i*letterspace)
  thisspan.top=ypos[i]
  }
  }
  i_path++
  timer=setTimeout("makesnake()",20)
  }
  else {
  clearTimeout(timer)
  endposition()
  }
  }

function endposition() {
  if (i_endposition<=stoptimemilli) {
  if (document.all) {
  for (i=0; i<message.length-1; i++) {
  var thisspan = eval("document.all.span"+(i)+".style")
  thisspan.posTop+=Math.ceil(8*Math.random())-4
  }
  }
  if (document.layers) {
  for (i=0; i<message.length-1; i++) {
  var thisspan = eval("document.span"+i)
  thisspan.top+=Math.ceil(8*Math.random())-4
  }
  }
  i_endposition++
  timer=setTimeout("endposition()",10)
  }
  else {
  clearTimeout(timer)
  i_endposition=0
  endposition2()
  }
  }
  
function endposition2() {
  if (i_endposition<=30) {
  if (document.all) {
  for (i=0; i<message.length-1; i++) {
  var thisspan = eval("document.all.span"+(i)+".style")
  thisspan.posTop+=Math.ceil(200*Math.random())-70
  }
  }
  if (document.layers) {
  for (i=0; i<message.length-1; i++) {
  var thisspan = eval("document.span"+i)
  thisspan.top+=Math.ceil(200*Math.random())-70
  }
  }
  i_endposition++
  timer=setTimeout("endposition2()",20)
  }
  else {
  clearTimeout(timer)
  i_endposition=0
  clearmessage()
  }
  }

function clearmessage() {
  finalxpos=tickertop
  i_path=0
  for (i=0;i<=maxtextlength;i++) {
  xpos[i]=5000
  }
  if (document.all) {
  for (i=0;i<=maxtextlength;i++) {
  var thisspan = eval("document.all.span"+i)
  thisspan.innerHTML=" "
  var thisspan = eval("document.all.span"+(i)+".style")
  thisspan.posLeft=xpos[i]=5000
  }
  }
  if (document.layers) {
  for (i=0;i<=maxtextlength;i++) {
  var thisspan = eval("document.span"+i+".document")
  thisspan.write("<p> </p>")
  thisspan.clear()
  thisspan = eval("document.span"+i)
  thisspan.left=5000
  }
  }
  timer=setTimeout("changemessage()",2000)
  }
  
function changemessage() {
  var messa=mes[i_mes]
  message=messa.split("")
  if (document.all) {
  for (i=0;i<=message.length-1;i++) {
  var thisspan = eval("document.all.span"+i)
  thisspan.innerHTML="<p style='font-family:"+textfont+";font-size:"+textsize+";color:"+textcolor[Math.floor((textcolor.length)*Math.random())]+"'>"+fontweight+message[i]+"</p>"
  }
  }
  if (document.layers) {
  for (i=0; i<message.length-1; i++) {
  var thisspan=eval("document.span"+i+".document")
  thisspan.write("<p><font size="+textsize+" color="+textcolor[Math.floor((textcolor.length)*Math.random())]+" face="+textfont+">"+fontweight+message[i]+"</font></p>")
  thisspan.clear()
  }
  }
  i_mes++ 
  if (i_mes>=mes.length) {i_mes=0}
  finalxpos=tickertop
  i_path=0
  timer=setTimeout("makesnake()",1000)
  }
  
// - End of JavaScript - -->
</script>

<style>A {
  COLOR: }
  .spanstyle {
  LEFT: 5000px; POSITION: absolute; VISIBILITY: visible
  }
</style>

-Insérer dans la balise <BODY _ _ _ _ > :

-Insérer entre les balises <BODY> et </BODY> :

Haut de la page

visiteurs depuis le : 02-04-2002 - Actuellement sur le site :

ACCUEIL

La construction du Mandragore 2

Les plans

L'histoire du Mandragore 1

Jonques et gréement de jonque

Projets

Utilisation et futures croisières du bateau

Encyclopédie de la mer

Le bois

Pavillonnerie

La construction amateur

Liens

Livre d'Or

Référencement

Nos bannières

Webmasters

Le site