Texte défilant horizontal saccadé

Version imprimable

Bonjour,
pour une petite Mairie, il est nécessaire d'afficher un bandeau défilant affichant des événements ponctuels.
Ça marche pas mal avec le code suivant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
#boxe_defil 
{ 
    position:relative; 
    width:auto;
    height:20px;
	  font-family: 'alegreyablack_italic', serif;
    color:#FFF;
    font-weight:500; 
    overflow:hidden; 
	text-shadow: 2px 2px #7b4760;	
} 
#defile 
{ 
    position:absolute; 
    margin-top:-1px; 
    background-color:transparent; 
}
 
</style>
<?php
        include ("connecpdo.php") ;
                $reponse = $connexion->query('SELECT defilement FROM defilehaut');
                while ($donnees = $reponse->fetch())
                 {
                        $var = $donnees ['defilement'];
                 }
?>
<script type="text/javascript">
var defile;
var psinit = 970; // position horizontale de depart
var pscrnt = psinit;
function texteDefile()
    {
        if (!defile) defile = document.getElementById('defile');
        if (defile)
            {
                if(pscrnt < ( - defile.offsetWidth) )
                    {
                        pscrnt = psinit;
                    }
                else
                    {
                        pscrnt+= -1; // pixel par deplacement
                    }
                defile.style.left = pscrnt+"px";
            }
 
        }
setInterval("texteDefile()",30); // delai de deplacement
</script>
<div id="boxe_defil">
	<div id="defile"><?php echo "$var"; ?></div>
</div>

Mais ledéfilement est saccadé avec apparition brusque de chaque mot.
Qui aurait une idée pour améliorer le code?
Merci d'avance.

23/02/2019, 23h06
wax78

C'est possible, en fonction des contraintes, de se passer du JS. Du CSS3 et des animations transform et des transitions pourrait le faire...
24/02/2019, 02h55
psychadelic

question basique avec dèjà 1001 réponses ur le net, dont au moins une ici : https://www.developpez.net/forums/d1...exte-saccades/

Donc premier conseil, largement indiqué sur tout les forums du monde, faire une recherche avant pour s'assurer que personne n'a pas déjà posé la même question.

Sinon, pour juste un regard sur ton code : utiliser un setInterval pour cette opération toujours un mouvement saccadé car intervalle de temps est approximatif et suivant la disponibilité de toute autre tache que gere ailleurs le navigateur: ce sont des navigateurs, pas des horloges de précision.

Ton truc se règle uniquement en css => https://developer.mozilla.org/fr/doc...animations_CSS
24/02/2019, 08h11
Invité
Bonjour,

Voici des démos, full CSS (SANS JS), fonctionnelles (regarder le code source : "Ctrl"+"U") :
- https://nosmoking.developpez.com/dem..._defilant.html
Et ma version, full CSS (SANS JS), "améliorée" (avec possibilité de texte formaté HTML) :
- https://codepen.io/jreaux62/pen/vzoJNN

Citation:

Envoyé par lesitadom39

[...] Mais ledéfilement est saccadé avec apparition brusque de chaque mot.
Qui aurait une idée pour améliorer le code?
Merci d'avance.

:salut:

Il faut donner une place suffisante au texte qui doit défiler :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
 
    let
        defile = document.querySelector('#defile'),
        psinit = 1000, // position horizontale de depart
        pscrnt = psinit;
 
    defile.style.border = '1pt solid red';
 
    // il faut imposer une taille sufisante pour contenir le texte
    //defile.style.width = '50%'; // ok
 
    defile.style.width = defile.textContent.length * 9 + 'px'; // ok dans mon test
 
    function texteDefile() {
        if (pscrnt < (-defile.offsetWidth)) {
            pscrnt = psinit;
        } else {
            pscrnt += -1; // pixel par deplacement
        }
 
        defile.style.left = pscrnt + "px";
    }
 
    setInterval(texteDefile, 30); // delai de deplacement
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

Je vous conseille de regarder et de tester les exemples donner dans les messages précédents.

24/02/2019, 10h30
NoSmoking

Bonjour,
dans cette discussion : Faire défiler un texte (fichier *.txt), on en était arrivé effectivement à cela : Texte défilant avec départ à droite.
24/02/2019, 10h49
Invité
Citation:

Envoyé par NoSmoking

Texte défilant avec départ à droite.

@NoSmoking

J'ai constaté un "bug"...
Si on veut "formater" le texte (exemple : ajouter des <b>...</b>), le texte se sépare en plusieurs morceaux, avec des vitesses différentes (!).

C'est dû au :first-child.
Qu'il suffit de remplacer par > :first-child, .msg ou juste > div * :
Code:

1 2 .marquee-rtl > div { ... } .marquee-rtl:hover > div { ... }
* Comme je l'a fait dans "ma" version (dérivée de la tienne) : https://codepen.io/jreaux62/pen/vzoJNN
25/02/2019, 09h57
NoSmoking

Citation:

J'ai constaté un "bug"...

effectivement il y a un bug entre le fauteuil et le clavier :mouarf:

Je n'ai pas mis la bonne/dernière version en ligne. Il manque bien le > avant :first-child ce qui fait que tous les 1st éléments se retrouvent avec un padding-left:100% et une animation personnelle.
Je remplace par le bon fichier, merci pour ta vigilance.