Bonjour à tous les passionnés.
A force de regarder le code, je ne vois pas où se situe le problème.
Juste un défilement d'un texte horizontalement, mais j'obtiens, par moment, des saccades désagréables.
J'ai fait une vue sur codepen http://codepen.io/JefReb/pen/jyNYpw
Je pense à une longueur du texte ou à un width non adapté, mais je ne comprends pas.
et
Code css : 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 html, body { margin: 0; padding: 0; font-size: 100%; } body { font-family: "Times New Roman", Times, verdana, arial, sans-serif; background-color: #fff; font-size: 100%; } body { width: 800px; margin: 0 auto; } /* Texte défilant */ .content { display: block; margin: 40px auto; padding: 0; overflow: hidden; position: relative; /* table-layout: fixed;*/ width: 650px; height: 60px; } .message { display: block; margin-left: -100%; padding: 0 5px; font-size: 2rem; text-align: left; animation: defilement 20s infinite linear; } .message:after { content: attr(data-text); position: absolute; white-space: nowrap; padding-left: 10px; } @keyframes defilement { 0%, 100% { margin-left:0; } 99.99% { margin-left:-100%; } }Le
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 <div class="content"><span class="message">Voici un texte qui doit défiler horizontalement --- </span> </div> <div class="content"><span class="message" data-text="Voici un texte qui doit défiler horizontalement --- ">Voici un texte qui doit défiler horizontalement --- </span></div>a été rajouter pour éviter un temps trop long avant la réapparition du message.
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 .message:after { content: attr(data-text); ... }
Mais peut-être est-ce ce code qui provoque les saccades.
Une idée serait appréciée. Merci d'avance à tous.
Partager