Super texte défilant verticalement et disparaissant avec dégradé

Description

Le fichier ZIP contient une page ou fonctionne la zone de texte défilante.
Il faut savoir que ce script permet de faire plusieurs choses très sympa.
1-Le texte défile du bas vers le haut.
2-Le texte apparait lettre par lettre... en bas de la zone.
3-Pendant que le texte défile vers le haut. Il change de ton (couleurs) jusqu'a disparaitre.

Il est donc tres facile a modifier et à placer dans une pages.

Source / Exemple :


<html>
<head>
<title>Text défilant</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE type=text/css>BODY {
SCROLLBAR-FACE-COLOR: #6699cc; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #ffcc00; SCROLLBAR-TRACK-COLOR: #baddff; SCROLLBAR-DARKSHADOW-COLOR: #000000
}
.telestyle {
position:absolute;
visibility:visible;
font-size:10pt;
font-family:Arial;
font-weight:normal;
color:#000066;
top:96px;
left:110px;
height:32px;
width:560px;
filter:alpha(opacity=100);
}
A:visited { color: #765741; text-decoration: none; font: bold 10pt Arial, Helvetica, sans-serif; }
A:link    { color: #a73636; text-decoration: none; font: bold 10pt Arial, Helvetica, sans-serif; }
A:hover   { color: #9820C6; text-decoration: underline; font: bold 10pt Arial, Helvetica, sans-serif; }
</STYLE>
</head>
<SCRIPT LANGUAGE="JavaScript">
<!--
var message = "Bienvenue"
var character = 0;
var to_print = "";
var ypos = 96;
var next = 0 ;
var fade = 100 ;
var next_message = new Array() ;
next_message[0] = "merci"
next_message[1] = "c'est trop cool"
next_message[2] = "Bienvenue"

function doText(text) {
  if (document.all) {
    if (character <= text.length - 1) {
      to_print += text.charAt(character);
      teletext.innerHTML = to_print;
      character++;
      }
    else
    scrollIt();
    }
  setTimeout("doText(message)", 20);
  }

function scrollIt() {
  if (ypos >= 0) {
    ypos -= 1;
    fade -= 3;
    if (ypos < 5) {
      teletext.innerHTML = "" ;
      }
    }
  else {
    ypos = 96;
    character = 0;
    to_print = "";
    nextMessage();
    fade = 100;
    }
  teletext.style.top = ypos;
  teletext.filters.alpha.opacity = fade;
  }

function nextMessage() {
  message = next_message[next]
  if (next == 2) {
    next = 0;
    }
  else
  next++;
  }

// -->

</script>

<body onLoad="doText(message)" bgcolor="#FFFFFF" >
<DIV ID=teletext CLASS="telestyle" style="width: 600px"> </DIV>
</body>
</html>

Conclusion :


Je travaille sur l'implementation de ce code pour permettre d'afficher des liens ou URL a la place du simple texte...
Si vous avez des idées, n'hesitez pas....
Tchu

Codes Sources

A voir également

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.