Accueil - la tête dans le code - créer un texte défilant sur un site Internet

créer un texte défilant sur un site Internet

Si vous cherchez à placer un texte défilant sur un site Internet, dans une page web, pour ajouter des effets ou même une boite d'annonces, JavaScript vous donne quasiment toutes les possibilités en quelques simples lignes de code.
Si vous êtes 'fan' des petits effets d'animation sur une page de site Internet, vous pouvez très facilement intégrer du texte défilant grâce au langage JavaScript sans aucun soucis, ni quasiment aucune connaissance en codage.
Il existe plusieurs possibilités de faire ' défiler ' un texte sur votre site: dans une boite, dans une bande horizontale et ... même dans le haut de la barre de navigation de votre navigateur web.
Pour remplacer la trop fameuse, mais assez vieille balise " marquee " qui est de plus en plus abandonnée, pour des problèmes de compatibilité avec les validateurs W3C, vous pouvez utiliser ce langage ET si vous avez, aussi, peur que l'affichage de s'effectue pas correctement, dans le cas d'une désactivation de JavaScript, placer ces bouts de code dans un simple fichier *.txt et les intégrer via PHP ( fonction ' include ' ) les fera fonctionner ... partout ... :)
Donc, trêve de blablabla, voici donc simplement, trois exemples de code, que vous pourrez, juste après personnalisation, intégrer dans votre site à l'endroit que vous choisirez. Il vous suffit de faire un simple copier/coller, avec en intermédiaire une étape de ' personnalisation ' pour afficher de que vous vous désirez ...
texte défilant
texte défilant : codage en JavaScript .

Un texte défilant horizontal.

Le plus courant, pour afficher sous forme de ' bande annonce ' un slogan par exemple :
<body>

<div id="defilhrizon" style="z-index:1;position:relative;width:400px;border:2px solid #222222;overflow:hidden" onmouseover="Pause1();" onmouseout="Defile1();" >
 <div id="contenu" style="z-index:1;position:relative;white-space:nowrap;display:inline;float:left;padding:5px" >
 le texte à personnaliser <a href="[http://votresite.ici]" onclick="window.open(this.href);return false;">nom de votre site</a>
 </div>
</div>

</body>

Ce code est à placer dans le corps de votre page, SANS mettre les deux balises ' body ' qui ne sont là que pour rappeler à quel endroit le placer.
Une fois personnalisé et collé dans votre code source il est de suite opérationnel :)
Il comporte, ici, en plus, la possibilité d'intégré un lien sortant qui s'ouvrira dans un autre onglet de votre navigateur Internet.
nota: si besoin est, ajoutez les paramètres de personnalisation pour ' defilhorizon ' et ' contenu ' dans votre feuille de style CSS.

Un texte défilant vertical.

Très facile à insérer dans une page de votre site pour afficher, par exemple, une ' news ' que  vous pourrez ensuite modifier à votre grès par la suite ...
Un tout petit peu plus 'complexe' puisque plus sophistiqué, il fonctionne cependant très bien ...
<script type="text/javascript">
// DEFIL TEXTE EN BOITE
var Timer2 ;
var Vitesse2 = 20 ;
var Scroll2 = 0 ;
var P2 = 0 ;
var Intro2 = true ;
var Boucle2 = false ;
// Texte2 peut être renseigné par une variable php
var Texte2 = '<p align="center"><big><b>TITRE<\/b><\/big><\/p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore<a href="[http://votresite.ici]" onclick="window.open(this.href);return false;">nom de votre site</a><\/p>' ;
// La séparation entre chaque texte adaptée à la largeur de du div defil2
Texte2 = Texte2 + '<p align="center">------------------------------<\/p>' ;
var Contenu2 = document.getElementById('contenu2') ;
Contenu2.innerHTML = Texte2 ;
var HautC = Contenu2.clientHeight ;
var Defil2 = document.getElementById('defil2') ;
var HautD = Defil2.clientHeight ;
Contenu2.style.top = HautD + "px" ;
function Defile2()
{
    while ( HautC <= HautD )
    {
    Texte2 += Texte2 ;
    Contenu2.innerHTML += Texte2 ;
    HautC = Contenu2.clientHeight ;
    }
    if ( P2 == 0 )
    {
    Contenu2.innerHTML += Texte2 ;
    P2 = 1 ;
    }
Scroll2++ ;
    if ( Intro2 == true && Scroll2 == HautD )
    {
    Scroll2 = 0 ;
    Contenu2.style.top = 0 + 'px' ;
    Intro2 = false ;
    Boucle2 = true ;
    }
    if ( Boucle2 == true && Scroll2 == HautC-20 ) // -20 compense le padding de 10px du div contenu2
    {
    Scroll2 = 0 ;
    Contenu2.style.top = 0 + 'px' ;
    }
Contenu2.style.top = ( Contenu2.offsetTop - 1 ) + 'px' ;
Timer2 = setTimeout('Defile2()', Vitesse2) ;
}
function Pause2()
{
clearTimeout(Timer2) ;   
}
window.onload = function() { Defile1();Defile2(); };
</script>

Code trouvé sur : http://codes-sources.commentcamarche.net/source/100900-texte-defilant-continu
Qu'il vous reste donc à personnaliser à votre manière avec 'vos' mots et 'vos' liens' avant de la placer dans 'votre' page :)
nota: de même que le précédent, une 'customisation' peut être necessaire via la feuille de style CSS ... :)

Un texte défilant dans la barre de navigation.

Un peu plus 'original' et surtout très peu employé, l'effet visuel sur le visiteur est garanti.:
<script language="JavaScript" type="text/javascript">
<!--
var titre = ". . . . Une souris et moi  !  ...  Fonds d'écran gratuits ... Créations de sites ...Référencement.... :-) ";
function bougerTitre()
{
 titre = titre.substring(1, titre.length) + titre.substring(0, 1);
 document.title = titre;
 setTimeout("bougerTitre()", 100);
 }
bougerTitre();
//-->
</script>
Pour le mettre en place:
- copier le code
- modifier la ligne ' var titre ' selon ce que vous désirez comme affichage.
- coller ensuite dans votre page Web.
Ce script a pour effet de remplacer, dans les navigateurs Internet, le titre affiché normalement depuis la balise 'title' par une animation avec une texte défilant.
A noter qu'il n'a aucune influence, donc ça ne craint absolument rien, sur ce que les ' moteurs de recherche ' vont trouver et donc sur le référencement !
Cela ne fait juste qu'ajouter un effet ' visuel ' et si vraiment vous en êtes mordus, alors associez-le à un favicon qui soit un gif animé, effet garanti :)

Du bon usage de l'insertion d'un texte défilant dans une page web.

Pour tous ces scripts, il n'y a aucune restriction technique, ni aucune répercussion sur le référencement éventuel de la page ou du site Internet dans lesquels ils peuvent être inclus, MAIS, il faut cependant aussi penser à, au moins, deux choses:
- JavaScript : lisible s'il est 'activé' sur le navigateur de vos visiteurs ( la grande majorité des cas ) et si non le faire fonctionner via PHP pour qu'il soit généré du côté serveur. ( là est la 'notion' technique )
- Les effets de textes défilants ainsi générés peuvent, parfois, et voire même souvent, étonner certes mais également lasser les internautes !
N'en n'abusez donc pas surtout !!!
Si vous aimez, si vous les mettez en place, pensez aussi et surtout aux effets produits et à l'impact visuel que cela aura sur vos visiteurs, car ce sont EUX  les plus importants :)

alors, vous avez maintenant les codes, à vous de savoir si vous les mettez en place :)
  @+

autres articles à lire :

Tous les articles ainsi que le contenu de ce site, comme indiqué en pages index, cgu et informations, sont mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, distribuer et modifier tant que cette note apparaît clairement:  "Paternité - Pas d'Utilisation Commerciale - Partage des Conditions Initiales à l'Identique 3.0 France", ainsi que la provenance de contenu relayé. Leur utilisation, totale, en ligne, sur ce site est réservée à refOK.fr

Écrire un commentaire

Quelle est la quatrième lettre du mot tdohm ?

Pour laisser un petit avis au passage, nul besoin d'avoir un site ou une adresse Internet, juste se donner un 'pseudo' ...
Les commentaires sont en 'dofollow', mais modérés à priori. Ils ne seront publiés qu'après vérification de votre message.
Si vous pensez ou désirez obtenir un backlink, votre commentaire doit être construit de manière cohérente, rédigé correctement ET avoir un minimum de contenu et de pertinence.