Une animation lettre par lettre avec plusieurs message dans le statut

DEMONSTRATION

Regardez dans la barre du navigateur ci-dessous, plusieurs message apparaissent succéssivement avec une animation lettre par lettre

Code source entre <HEAD> et </HEAD>
top

<script language="Javascript">
<!--
//Merci de ne pas effacer ces lignes
//D'autres script,applet,images sur webgraf.Com 
//Mathieu Gros, webmaster@webgraf.Com
function initArray(n) {
  this.length = n;
  for (var i =1; i <= n; i++) {
    this[i] = ' '
  }
}

slide = new initArray(4)             // 4 = nombre total de phrase 
slide[0]="Ceci est le 1er message"
slide[1]="Maintenant le 2e Message"
slide[2]="3e message"
slide[3]="Et le dernier !!"
//Rajoutez autant de phrase que vous voulez
//sans oublier de changer le nombre total de phrase
//et le slide[X] en début de ligne (= N° de la ligne)


var delay1 = 2          //Delay entre chaque frame du déplacement de la lettre
var delay2 = 1000       //pause en fin d'animation d'une phrase

var text = slide[0] + " "
var str = " " 
var leftmsg = "" 
var nextmsg = 0
function setMessage() {
if (str.length == 1) {
while (text.substring(0, 1) == " ") {
leftmsg += str
str = text.substring(0, 1)
text = text.substring(1, text.length) 
}
leftmsg += str            
str = text.substring(0, 1)
text = text.substring(1, text.length) 
for (var x = 0; x < 120; x++) {
str = " " + str
}
}
else {
str = str.substring(10, str.length)
}
window.status = leftmsg + str
if (text == "") {
str = " "
nextmsg++
if (nextmsg > slide.length) {
nextmsg = 0
}
text = slide[nextmsg] + " "
leftmsg = ""  
setTimeout('setMessage()',delay2)
}
else {
setTimeout('setMessage()',delay1)
}
}
setMessage();
//-->
</script>
 
INFORMATIONS COMPLEMENTAIRES
top

Comment intégrer ce script dans votre page: Vous pouvez télécharger cette page au format zip :télécharger.








Un problème ou une critique : e-mail
Des ressources utiles et gratuites pour vos pages Web :
webgraf.com