Texte défilant, arrêt au milieu de la page ?
Escienca
Messages postés
429
Date d'inscription
Statut
Membre
Dernière intervention
-
Escienca Messages postés 429 Date d'inscription Statut Membre Dernière intervention -
Escienca Messages postés 429 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je souhaite faire défiler un texte sur une page de mon site à l'aide de la balise "marquee". Tout se passe pour le mieux sauf que je voudrais que le texte s'arrête au milieu de la page. Voici le code que j'utilise :
<marquee Class="Scroller" behavior="scroll" direction="left" width="100%" height="100%" scrollamount="4" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
<font color="#ffffff"><font size="6">mon texte
Le texte défile, mais je voudrais qu'il s'arrête au milieu de la page, donc.
Merci de votre aide.
Je souhaite faire défiler un texte sur une page de mon site à l'aide de la balise "marquee". Tout se passe pour le mieux sauf que je voudrais que le texte s'arrête au milieu de la page. Voici le code que j'utilise :
<marquee Class="Scroller" behavior="scroll" direction="left" width="100%" height="100%" scrollamount="4" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
<font color="#ffffff"><font size="6">mon texte
Le texte défile, mais je voudrais qu'il s'arrête au milieu de la page, donc.
Merci de votre aide.
A voir également:
- Texte défilant html
- Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
- Editeur html - Télécharger - HTML
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Texte barré whatsapp - Guide
4 réponses
Rebonjour,
j'ai trouvé un post très intéressant pour cette fonction:
https://forums.commentcamarche.net/forum/affich-3608573-texte-defilant-arret-definitif
J'ai bidouillé comme suis (ce n'est pas encore définitif mais bon, au moins ça marche), pour que mon texte s'arrête au milieu sans repartir :
<body background="/home/escienca/Images/indexsite.jpeg" bgcolor="#000000">
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<html>
<head>
<script type="text/javascript">
var timer;
var larg;
var marge = 5;
var milieu;
var blocDefil;
function defile(fin) {
marge = marge + 5;
blocDefil.style.marginLeft = marge + "px";
if(marge >= fin) {
clearInterval(timer);
if(!(marge >= larg-blocDefil.offsetLeft)) {
setTimeout("repars()", 3000);
}else {
marge = 0;
timer = setInterval("defile(milieu)", 100);
}
}
}
function initDefile() {
blocDefil = document.getElementById("txtdefil");
if (document.body) {
larg = document.body.clientWidth;
}else {
larg = window.innerWidth;
}
milieu = larg/2 - blocDefil.offsetWidth/2;
timer = setInterval("defile(milieu)", 100);
}
</script>
<style type="text/css">
.txtdefil {
text-align: Left;
margin-left: 0px;
}
</style>
</head>
<body onload="initDefile()">
<div>
<span id="txtdefil" style="color:white">mon texte qui défile et s'arrête au milieu de la page</span>
</div>
</body>
</html>
J'ai fait une petite page perso rapide pour l'exemple:
http://escienca.pagesperso-orange.fr/
Tout ceci marche très bien, mais je voudrais savoir comment inverser le sens de défilement. Au lieu de voir apparaître le texte de la gauche et s'arrêter au milieu, je voudrais qu'il arrive de la droite. C'est expliqué sur l'autre page mais je n'ai rien compris.
A terme je voudrais qu'une ligne apparaisse en venant de la gauche, et une en dessous qui apparaisse de la droite, les deux s'arrêtant l'une sous l'autre au milieu.
Merci de votre aide.
j'ai trouvé un post très intéressant pour cette fonction:
https://forums.commentcamarche.net/forum/affich-3608573-texte-defilant-arret-definitif
J'ai bidouillé comme suis (ce n'est pas encore définitif mais bon, au moins ça marche), pour que mon texte s'arrête au milieu sans repartir :
<body background="/home/escienca/Images/indexsite.jpeg" bgcolor="#000000">
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<html>
<head>
<script type="text/javascript">
var timer;
var larg;
var marge = 5;
var milieu;
var blocDefil;
function defile(fin) {
marge = marge + 5;
blocDefil.style.marginLeft = marge + "px";
if(marge >= fin) {
clearInterval(timer);
if(!(marge >= larg-blocDefil.offsetLeft)) {
setTimeout("repars()", 3000);
}else {
marge = 0;
timer = setInterval("defile(milieu)", 100);
}
}
}
function initDefile() {
blocDefil = document.getElementById("txtdefil");
if (document.body) {
larg = document.body.clientWidth;
}else {
larg = window.innerWidth;
}
milieu = larg/2 - blocDefil.offsetWidth/2;
timer = setInterval("defile(milieu)", 100);
}
</script>
<style type="text/css">
.txtdefil {
text-align: Left;
margin-left: 0px;
}
</style>
</head>
<body onload="initDefile()">
<div>
<span id="txtdefil" style="color:white">mon texte qui défile et s'arrête au milieu de la page</span>
</div>
</body>
</html>
J'ai fait une petite page perso rapide pour l'exemple:
http://escienca.pagesperso-orange.fr/
Tout ceci marche très bien, mais je voudrais savoir comment inverser le sens de défilement. Au lieu de voir apparaître le texte de la gauche et s'arrêter au milieu, je voudrais qu'il arrive de la droite. C'est expliqué sur l'autre page mais je n'ai rien compris.
A terme je voudrais qu'une ligne apparaisse en venant de la gauche, et une en dessous qui apparaisse de la droite, les deux s'arrêtant l'une sous l'autre au milieu.
Merci de votre aide.
Rebonjour, alors voilà j'en suis là :
http://escienca.pagesperso-orange.fr/
Le code tel que je l'ai modifié donne ça (ce n'est toujours pas la version définitive, pour le moment je ne fait que bidouiller, il va falloir par la suite faire le ménage de tout ce qui n'y sers plus à rien bien sur):
<body background="/home/escienca/Images/indexsite.jpeg" bgcolor="#000000">
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<html>
<head>
<script type="text/javascript">
var timer;
var larg;
var marge = 5;
var milieu;
var blocDefil;
function defile(fin) {
marge = marge + 5;
blocDefil.style.marginRight = marge + "px";
if(marge >= fin) {
clearInterval(timer);
if(!(marge >= larg-blocDefil.offsetLeft)) {
setTimeout("repars()", 3000);
}else {
marge = 0;
timer = setInterval("defile(milieu)", 100);
}
}
}
function initDefile() {
blocDefil = document.getElementById("txtdefil");
if (document.body) {
larg = document.body.clientWidth;
}else {
larg = window.innerWidth;
}
milieu = larg/2 - blocDefil.offsetWidth/2;
timer = setInterval("defile(milieu)", 100);
}
</script>
<style type="text/css">
.txtdefil {
text-align: right;
margin-left: 5px;
}
</style>
</head>
<body onload="initDefile()">
<div align="Right">
<span id="txtdefil" style="color:white">mon texte qui défile et s'arrête au milieu de la page</span>
</div>
<p>
<div align="Left">
<span id="txtdefil" style="color:white">mon texte qui défile et s'arrête au milieu de la page (ou plutôt qui devrait ??? <img src="data:image/gif;base64,R0lGODlhFAAUAJECAAAAAGbM/////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFEgACACwAAAAAFAAUAAACR5SPqXvgwBYINMDY7KQXO+Nw0tOBYrNVX9allcqa72yZ1xTStYDzaviA9VwpItCnmxWRyd/K1SzJNMFTAsqBSaIe6ArDI2EKACH5BAUUAAIALAUAAgAIAAoAAAIPlA+HEWqRFIiu2osVfLEAACH5BAUUAAIALAUAAgAIAAoAAAINlB+HAOoPo5wQJGFNAQAh+QQFFAACACwEAAIACQAKAAACDZQvgAcRC6OctMZmsCkAOw=="> )</span>
</div>
</body>
</html>
Voilà donc pour en haut c'est bon, mais celui d'en bas ne veut pas décidément pas défiler dans le sens contraire (de gauche à droite, et arrêt au milieu sous la ligne d'en haut). J'ai tenté un frame, ça complique bien trop, et ça ne marche pas de toute façon. Je continue à chercher, mais au cas où quelqu'un aurait un éclair de génie, ça me ferait gagner un temps précieux,
Merci de votre aide.
http://escienca.pagesperso-orange.fr/
Le code tel que je l'ai modifié donne ça (ce n'est toujours pas la version définitive, pour le moment je ne fait que bidouiller, il va falloir par la suite faire le ménage de tout ce qui n'y sers plus à rien bien sur):
<body background="/home/escienca/Images/indexsite.jpeg" bgcolor="#000000">
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<html>
<head>
<script type="text/javascript">
var timer;
var larg;
var marge = 5;
var milieu;
var blocDefil;
function defile(fin) {
marge = marge + 5;
blocDefil.style.marginRight = marge + "px";
if(marge >= fin) {
clearInterval(timer);
if(!(marge >= larg-blocDefil.offsetLeft)) {
setTimeout("repars()", 3000);
}else {
marge = 0;
timer = setInterval("defile(milieu)", 100);
}
}
}
function initDefile() {
blocDefil = document.getElementById("txtdefil");
if (document.body) {
larg = document.body.clientWidth;
}else {
larg = window.innerWidth;
}
milieu = larg/2 - blocDefil.offsetWidth/2;
timer = setInterval("defile(milieu)", 100);
}
</script>
<style type="text/css">
.txtdefil {
text-align: right;
margin-left: 5px;
}
</style>
</head>
<body onload="initDefile()">
<div align="Right">
<span id="txtdefil" style="color:white">mon texte qui défile et s'arrête au milieu de la page</span>
</div>
<p>
<div align="Left">
<span id="txtdefil" style="color:white">mon texte qui défile et s'arrête au milieu de la page (ou plutôt qui devrait ??? <img src="data:image/gif;base64,R0lGODlhFAAUAJECAAAAAGbM/////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFEgACACwAAAAAFAAUAAACR5SPqXvgwBYINMDY7KQXO+Nw0tOBYrNVX9allcqa72yZ1xTStYDzaviA9VwpItCnmxWRyd/K1SzJNMFTAsqBSaIe6ArDI2EKACH5BAUUAAIALAUAAgAIAAoAAAIPlA+HEWqRFIiu2osVfLEAACH5BAUUAAIALAUAAgAIAAoAAAINlB+HAOoPo5wQJGFNAQAh+QQFFAACACwEAAIACQAKAAACDZQvgAcRC6OctMZmsCkAOw=="> )</span>
</div>
</body>
</html>
Voilà donc pour en haut c'est bon, mais celui d'en bas ne veut pas décidément pas défiler dans le sens contraire (de gauche à droite, et arrêt au milieu sous la ligne d'en haut). J'ai tenté un frame, ça complique bien trop, et ça ne marche pas de toute façon. Je continue à chercher, mais au cas où quelqu'un aurait un éclair de génie, ça me ferait gagner un temps précieux,
Merci de votre aide.
Rerebonjour, voilà j'ai trouvé:
http://escienca.pagesperso-orange.fr/
C'était bien avec des frames qu'il fallait jouer au final, voilà les 3 codes :
le frame1 (Montexte1):
<body background="/home/escienca/Images/indexsite.jpeg" bgcolor="#000000">
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<html>
<head>
<script type="text/javascript">
var marge = 0;
var milieu;
var blocDefil;
function defile(fin) {
marge = marge + 5;
blocDefil.style.marginRight = marge + "px";
if(marge >= fin) {
clearInterval(timer);
if(!(marge >= larg-blocDefil.offsetCenter)) {
setTimeout("repars()", 3000);
}
}
}
function initDefile() {
blocDefil = document.getElementById("txtdefil");
if (document.body) {
larg = document.body.clientWidth;
}else {
larg = window.innerWidth;
}
milieu = larg/2 - blocDefil.offsetWidth/2;
timer = setInterval("defile(milieu)", 100);
}
</script>
</head>
<body onload="initDefile()">
<div align="right" width="100%">
<span id="txtdefil" span style="color:white;">Montexte1</span>
</div>
</body>
</html>
Le frame2 (Montexte2):
<body background="/home/escienca/Images/indexsite.jpeg" bgcolor="#000000">
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<html>
<head>
<script type="text/javascript">
var marge = 0;
var milieu;
var blocDefil;
function defile(fin) {
marge = marge + 5;
blocDefil.style.marginLeft = marge + "px";
if(marge >= fin) {
clearInterval(timer);
if(!(marge >= larg-blocDefil.offsetCenter)) {
setTimeout("repars()", 3000);
}
}
}
function initDefile() {
blocDefil = document.getElementById("txtdefil");
if (document.body) {
larg = document.body.clientWidth;
}else {
larg = window.innerWidth;
}
milieu = larg/2 - blocDefil.offsetWidth/2;
timer = setInterval("defile(milieu)", 100);
}
</script>
</head>
<body onload="initDefile()">
<div align="left" width="100%">
<span id="txtdefil" style="color:white">Montexte2</span>
</div>
</body>
</html>
Et la page finale, qui contient les 2 frames:
<FRAMESET ROWS="7%,
93%" border="0">
<FRAME SRC="http://exeo.pagesperso-orange.fr/frame1.html" NAME="haut" width="100%">
<FRAME SRC="http://exeo.pagesperso-orange.fr/frame2.html" NAME="bas" width="100%">
</FRAMESET>
Reste quelques petits détails, comme par exemple le petit décalage entre les 2 lignes. Je pense que c'est juste une simple histoire de marges. Je modifierais mon message une fois que j'aurais trouvé.
Enfin voilà, c'est fonctionnel, mais attention j'ai remarqué que ces codes étaient très sensibles, si vous modifiez, je vous conseillent de faire des sauvegardes au fur et à mesure de vos fichiers...
À bientôt...
http://escienca.pagesperso-orange.fr/
C'était bien avec des frames qu'il fallait jouer au final, voilà les 3 codes :
le frame1 (Montexte1):
<body background="/home/escienca/Images/indexsite.jpeg" bgcolor="#000000">
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<html>
<head>
<script type="text/javascript">
var marge = 0;
var milieu;
var blocDefil;
function defile(fin) {
marge = marge + 5;
blocDefil.style.marginRight = marge + "px";
if(marge >= fin) {
clearInterval(timer);
if(!(marge >= larg-blocDefil.offsetCenter)) {
setTimeout("repars()", 3000);
}
}
}
function initDefile() {
blocDefil = document.getElementById("txtdefil");
if (document.body) {
larg = document.body.clientWidth;
}else {
larg = window.innerWidth;
}
milieu = larg/2 - blocDefil.offsetWidth/2;
timer = setInterval("defile(milieu)", 100);
}
</script>
</head>
<body onload="initDefile()">
<div align="right" width="100%">
<span id="txtdefil" span style="color:white;">Montexte1</span>
</div>
</body>
</html>
Le frame2 (Montexte2):
<body background="/home/escienca/Images/indexsite.jpeg" bgcolor="#000000">
<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<html>
<head>
<script type="text/javascript">
var marge = 0;
var milieu;
var blocDefil;
function defile(fin) {
marge = marge + 5;
blocDefil.style.marginLeft = marge + "px";
if(marge >= fin) {
clearInterval(timer);
if(!(marge >= larg-blocDefil.offsetCenter)) {
setTimeout("repars()", 3000);
}
}
}
function initDefile() {
blocDefil = document.getElementById("txtdefil");
if (document.body) {
larg = document.body.clientWidth;
}else {
larg = window.innerWidth;
}
milieu = larg/2 - blocDefil.offsetWidth/2;
timer = setInterval("defile(milieu)", 100);
}
</script>
</head>
<body onload="initDefile()">
<div align="left" width="100%">
<span id="txtdefil" style="color:white">Montexte2</span>
</div>
</body>
</html>
Et la page finale, qui contient les 2 frames:
<FRAMESET ROWS="7%,
93%" border="0">
<FRAME SRC="http://exeo.pagesperso-orange.fr/frame1.html" NAME="haut" width="100%">
<FRAME SRC="http://exeo.pagesperso-orange.fr/frame2.html" NAME="bas" width="100%">
</FRAMESET>
Reste quelques petits détails, comme par exemple le petit décalage entre les 2 lignes. Je pense que c'est juste une simple histoire de marges. Je modifierais mon message une fois que j'aurais trouvé.
Enfin voilà, c'est fonctionnel, mais attention j'ai remarqué que ces codes étaient très sensibles, si vous modifiez, je vous conseillent de faire des sauvegardes au fur et à mesure de vos fichiers...
À bientôt...
