créer un texte défilant sur un site Internet
samedi 28 février 2015 à 17:44Si 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 : codage en JavaScript .
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 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 ... :)
<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 :)
- 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 :)
@+
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 : 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 :)
@+
© refOK by refok.fr - duplication interdite
