Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

DHTML
Effets non-contextuels

  Générique de film

fonction de ce script  principe de ce script  le script lui-meme  demonstration du script  telechargement du script  Compatibilite du script... a partir de : 

  Fonction
Le but de ce script est de créer sur une page une sorte de générique façon fin de film (défilement de bas en haut).
  Principe
Tout d'abord on créé un calque (layer) qui sera notre générique puis il s'agit de le déplacer verticalement, de bas en haut, selon une vitesse paramétrable.
On prendra garde aux différences d'interprétation entre Netscape et Internet Explorer en doublant le code de façon adaptée à chacun des deux navigateurs.
  Le script
dans la partie <head>
<script language="JavaScript">
// détection du navigateur
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// Le point de départ vertical du calque
var depart = 350;

// L'espace entre chaque position (en pixels)
var pas = 15;

// Le temps entre chaque déplacement (en millisecondes)
var vitesse = 250;

// La hauteur approximative du calque (pour laisser le calque disparaître en haut de la page)
var hauteur = 140;


// On signale que le calque est au point de départ
var placement = depart;

function generique() {

// Instructions pour Netscape
if (ns4) {

// Tant que le calque est entre le point de départ et le point d'arrivée ( '-hauteur' = la hauteur du calque au delà du haut de l'écran)
if ( document.banniere.top <= depart && document.banniere.top > -hauteur ) {

// Déplacement du calque de la valeur d'un pas
document.banniere.top = placement - pas;

// On stocke la nouvelle position du calque
placement = document.banniere.top;

// On relance la fonction pour le déplacement suivant
setTimeout("generique()",vitesse);
}
else {
// Si le calque a dépassé le point d'arrivée, on le replace au point de départ
document.banniere.top = depart;

// On stocke la nouvelle position du calque
placement = document.banniere.top;

// Et on relance de nouveau
setTimeout("generique()",vitesse);
}
}

// Instructions pour Internet Explorer
if (ie4) {

// On intercepte la position du calque
placement = banniere.style.top.substring(0,(banniere.style.top.length - 2));
placement = parseInt(placement,10);

// Tant que le calque est entre le point de départ et le point d'arrivée
if ( placement <= depart && placement > -hauteur ) {

// Déplacement du calque de la valeur d'un pas
banniere.style.top = placement - pas;

// On stocke la nouvelle position du calque
placement = placement - pas;

// On relance la fonction pour le déplacement suivant
setTimeout("generique()",vitesse);
}
else {
// Si le calque a dépassé le point d'arrivée, on le replace au point de départ
banniere.style.top = depart;

// On stocke la nouvelle position du calque
placement = depart;

// Et on relance de nouveau
setTimeout("generique()",50);
}
}
}
</script>

dans la partie <body>
<body OnLoad="generique();">

<!-- La valeur de 'top' doit être égale à 'depart' -->
<div name="banniere" id="banniere" style="position: absolute; top: 350px; left: 0px; visibility: visible; z-index: 1;">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center">Voici un petit script
qui présente un défilement vertical
façon "<b>Générique de film</b>"

Vitesse de défilement paramétrable,
point de départ paramétrable,
contenu du défilement totalement modifiable !</td>
</tr>
</table>
</div>
  Démonstration

Voir la démonstration
  Téléchargement
Ce script est disponible en deux versions :
  • le script est intégré à la page où il agit,
  • le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

    L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
    Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.
    		•
    Script intégré :
    enc_generique.zip
    2 Ko    		 telechargez le script telechargez le script
    Script séparé :
    enc_generique2.zip
    2 Ko
    Recherche
    		aide sur la recherche
    CSS 2
    HTML 4
    Javascript 1.3
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter