Discussion :

[lesitadom39]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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...

[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

[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

[danielhagnoul]

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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.

[Invité]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

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

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

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.