Discussion :

[JefReb]

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.

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%;
}
}

et

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>

Le

Code css :

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

1
2
.message:after {
	content: attr(data-text); ... }

a été rajouter pour éviter un temps trop long avant la réapparition du message.
Mais peut-être est-ce ce code qui provoque les saccades.

Une idée serait appréciée. Merci d'avance à tous.

[ABCIWEB]

Cela peut venir du navigateur, essaies sur plusieurs navigateurs pour voir (firefox et chrome par exemple).

[JefReb]

Merci, mais cela fait la même chose dans Chrome, Firefox et IExplore. Je pense que cela devrait faire la même chose sous opera ou safari, mais je ne peux le tester.
La saccade se passe à la fin, au moment où le texte reprend depuis le début.
Je continue à chercher ...

[NoSmoking]

Bonjour,
ton soucis provient de la position de ton élément :after par rapport à son conteneur parent.

Commençons par la régle @keyframe :

Code :

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

1
2
3
4
5
6
7
8
 @keyframes defilement {
    0% {
        margin-left:0;
    }
    100% {
        margin-left:-100%;
    }
}

est très largement suffisant.
pour la classe mesage

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.message {
    display: inline-block;  /* pour un meilleur alignement */
    position:relative;      /* pour servir de référent à :after */
    min-width:100%;         /* dimension minimum */
    /*margin-left: -100%;   /* OUT pas nécessaire */
    /*padding: 0 5px;       /* OUT pas nécessaire */
    background:#cde;        /* pour voir l'espace occupé */
    font-size: 2rem;
    text-align: left;
    animation: defilement 20s infinite linear;
}

maintenant le :after

Code :

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

1
2
3
4
5
6
7
.message:after {
    content: attr(data-text);
    position: absolute;
    left:100%;              /* placement à droite toute */
    white-space: nowrap;
    /*padding-left: 10px    /* OUT pas nécessaire ou mettre même valeur que conteneur */
}

pour bien voir tes positionnements de départ n'hésite pas à désactiver l'animation et les « hidden » le tout en associant des couleurs de background différentes.

[Invité]

Bonjour,

le défi m'a plu : http://codepen.io/jreaux62/pen/EZYBeW

Astuce(s) :

• le <div> prend la longueur du texte (c'est la longueur de référence pour le défilement).
  Il est en absolu : le texte peut sans problème être plus long que le conteneur "content"
• on décale l'animation du 2ème texte (data-text) pour un effet "défilement en continu".

Code html :

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

1
2
3
4
5
6
7
<div class="messagedefilant">
  <div data-text="Voici un texte qui doit défiler horizontalement. Il peut etre encore plus long !---"><span>Voici un texte qui doit défiler horizontalement. Il peut etre encore plus long !---</span></div>
</div>
 
<div class="messagedefilant">
  <div data-text="texte très court !---"><span>texte très court !---</span></div>
</div>

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
48
/* Texte défilant */
.messagedefilant {
  display: block;
  margin: 40px auto;
  padding: 0;
  overflow: hidden;
  position: relative;
  width: 50%;
  max-width: 640px;
  height: 60px;
}
 
.messagedefilant div {
  position: absolute;
  min-width: 100%; /* au minimum la largeur du conteneur */
}
 
.messagedefilant div span, 
.messagedefilant div:after {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  white-space: nowrap;
  top:0;
}
 
.messagedefilant div span {
  animation: defilement 10s infinite linear;
  background: #cde;
}
 
.messagedefilant div:after {
  position: absolute;
  top:0; left:0;
  content:attr(data-text);
  animation: defilement2 10s infinite linear;
  background: #edc;
}
 
@keyframes defilement {
  0% { margin-left: 0; }
  100% { margin-left: -100%; }
}
 
@keyframes defilement2 {
  0% { margin-left: 100%; }
  100% { margin-left: 0%; }
}

[JefReb]

Ha super aux 2 réponses.
Je reviens juste ce soir pour voir ça de suite.
Mille merci. moi aussi c'est un peu un défit. a bientôt pour clore ...