begin process at 2012 05 28 14:59:59
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > SUPER TEXTE DÉFILANT VERTICALEMENT ET DISPARAISSANT AVEC DÉGRADÉ

SUPER TEXTE DÉFILANT VERTICALEMENT ET DISPARAISSANT AVEC DÉGRADÉ


 Information sur la source

Note :
3 / 10 - par 3 personnes
3,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Niveau :Initié Date de création :13/05/2003 Date de mise à jour :15/05/2003 10:58:16 Vu / téléchargé :22 486 / 1 450
Auteur : dagoncal

Ecrire un message privé
Commentaire sur cette source (7)
Ajouter un commentaire et/ou une note

 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

  • <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> 
<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

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture SUPER MENU FRAME - A ESSAYER A TOUT PRIX ! CA VO LE DÉTOUR !
Source avec Zip PASSAGE DE PARAMETRE EN URL - AVEC FONCTION DE RECUPERATION ...
Toutes les sources de dagoncal

 Sources de la même categorie

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
Toutes les sources de la catégorie Effets

Commentaires et avis

Commentaire de neobad le 16/05/2003 15:38:45

heu ce code ne marche pas sur netscape .. est ce ke klk1 pourrais m'aider a le modifier ?.. pask javascript et moi ca f 2
badcrakers@hotmail.com

Commentaire de markachat le 20/11/2003 23:38:46

Avant d'essayer d'afficher autre chose, il faudrait penser à la portabilité du code sur autre chose que internet explorer....
Netscape et Opera au minimum....

Commentaire de SgtKabukinan le 13/01/2005 15:55:03

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

Commentaire de SgtKabukinan le 13/01/2005 17:33:59

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 ;)

[code]
<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>

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

Commentaire de SgtKabukinan le 13/01/2005 17:35:49

ah oui au fait le tab hexcolor sert à rien ;) c une ommission en voulant faire plus compliqué !

Commentaire de Akeela le 19/03/2006 00:47:43

Marche pas sous firefox 1.5, au boulot !

Commentaire de goltar le 11/03/2011 12:46:20

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

 Ajouter un commentaire

Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,390 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)