1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Effets
  5. Super texte défilant verticalement et disparaissant avec dégradé

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

Soyez le premier à donner votre avis sur cette source.

Vue 24 739 fois - Téléchargée 1 602 fois

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Signaler
Messages postés
1
Date d'inscription
vendredi 11 mars 2011
Statut
Membre
Dernière intervention
11 mars 2011
Salut à tous,
Je suis sérieusement intéressé par ce ch'ti bout de code qui fonctionne parfaitement sous IE, mais malheureusement n'est pas compatible Firefox.

Je vois plusieurs incompatibilités, mais malheureusement je n'ai pas les connaissances nécessaire pour le modifier.
CSS - Opacity - Incompatible
teletext.innerHTML = to_print; - Incompatible

Quelqu'un peut m'aider ?
Merci
Signaler
Messages postés
5
Date d'inscription
lundi 13 mars 2006
Statut
Membre
Dernière intervention
25 mai 2009
Marche pas sous firefox 1.5, au boulot !
Signaler
Messages postés
106
Date d'inscription
lundi 20 septembre 2004
Statut
Membre
Dernière intervention
23 janvier 2010
ah oui au fait le tab hexcolor sert à rien ;) c une ommission en voulant faire plus compliqué !
Signaler
Messages postés
106
Date d'inscription
lundi 20 septembre 2004
Statut
Membre
Dernière intervention
23 janvier 2010
hum.... bon bah après mure reflexion, je l'ai quand même fait, après tout meme si le message est tres ancien ca peut en aider d'autres ;) 

<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 character = 0;
var to_print = "";
var ypos = 96;
var iMsg = 0 ;
var fade 100 ; var iFade 0 ;
var next_message = new Array("Bienvenue", "merci", "c'est trop cool") ;
var hexColor = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];

function doText(text)
{
if (character <= text.length - 1)
{
  to_print += text.charAt(character);
  teletext.innerHTML = to_print;
  character++;
}
else { scrollIt(); }
setTimeout("doText(next_message[iMsg])", 20);
}

function scrollIt()
{
if (ypos >= 0)
{
  ypos -= 1;
  fade -= 3;
  iFade ++;
  if (ypos < 5) { teletext.innerHTML = "" ; }
}
else
{
  ypos = 96;
  character = 0;
  to_print = "";
  nextMessage();
  fade = 100;
  iFade = 0 ;
}
getCrossBrowserStyle('teletext').top = ypos;	
if (teletext.filter) { teletext.filters.alpha.opacity = fade; }
else { Fade(0,0,96,255,255,255,64,iFade) ; }
}

function nextMessage()
{
  if (iMsg next_message.length) { iMsg 0; return; }
  iMsg++ ;
}

function getCrossBrowserStyle(id)
{
if (document.getElementById)
element_style  = document.getElementById(id).style ;	
else if (document.all)
element_style  = document.all[id].style ;	
else if (document.layers)
element_style  = document.layers[id] ;
return element_style ;
}

function Fade(StartRed, StartGreen, StartBlue, EndRed, EndGreen, EndBlue, Step, i)
{
R = Math.floor(StartRed   * ((Step-i)/Step) + EndRed   * (i/Step));
G = Math.floor(StartGreen * ((Step-i)/Step) + EndGreen * (i/Step));
B = Math.floor(StartBlue  * ((Step-i)/Step) + EndBlue  * (i/Step));
getCrossBrowserStyle('teletext').color = "rgb(" + R + "," + G + "," + B + ")" ;
}
// -->

</script>



 


</html>
Signaler
Messages postés
106
Date d'inscription
lundi 20 septembre 2004
Statut
Membre
Dernière intervention
23 janvier 2010
ce qui est marrant c'est que si on regarde bien le code, y'a une disctinction très clair (test DOM) pour un portage
mais la suite ne suit pas ;)
si kk'un est interessé par ce code version cross-browser, qu'il me fasse signe, je me ferais un plaisir de prendre 1-2 minutes pour le faire
bien a vous
SgtK
Afficher les 7 commentaires
S'inscrire maintenant

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.

Du même auteur (dagoncal)