Défilement horizontal en CSS, d'un texte sans saccades

**JefReb** · 01/01/2017, 18h21

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** · 01/01/2017, 21h43

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

**JefReb** · 02/01/2017, 08h39

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** · 02/01/2017, 10h47

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é · 02/01/2017, 20h45

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** · 03/01/2017, 21h18

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

**JefReb** · 03/01/2017, 21h32

Merci à tous les deux.
Nosmoking m'a mis le doigt sur mon erreur avec :after et ça marche nickel.

La solution de Jreaux62 est une approche différente et très intéressante.
Je garde ces 2 solutions dans mes archives pour le futur.
Encore merci pour y avoir passé un peu de votre temps.

Invité · 04/01/2017, 08h52

Bonjour,

je suppose que lors de tes recherches, tu étais tombé sur ce lien :

Texte défilant en css avec CSS3

J'en ai (très) légèrement modifié le code : http://codepen.io/jreaux62/pen/mRdQyw

**JefReb** · 04/01/2017, 11h19

Oui c'est tout à fait exact. Lorsque je trouve des exemples qui pourraient m'intéresser, je regarde le code, et j'essaye de le modifier pour le comprendre.
Là je butais sur ce problème de saccade, c'est pourquoi je l'ai soumis.
Ce n'est pas du plagiat, mais effectivement je n'ai pas indiqué cette ma source, ne me rappelant plus où je l'avais vue.
Quand je peux j'indique toujours les auteurs origines.
Butiner, les exemples, comprendre et les réutiliser, je pense que c'est la seule façon de se perfectionner.
Merci encore pour ta réponse qui rentre dans mon ... butinage.
Amicalement
Jef

**NoSmoking** · 04/01/2017, 18h51

Envoyé par jreaux62

le texte peut sans problème être plus long que le conteneur "content"

cela me paraît quand même bien compromis et ce compte tenu que le décalage « buté » est exprimé en fonction du conteneur, remember dans @keyframe le margin-left:-100%.
Donc si le message est plus large il « tournera » avant la fin et donc pas softement.

A la lecture de l'article, l'auteur le signale de la façon suivante

Envoyé par Natacha

Attention la ligne 7 dépend de l’environnement dans lequel le texte défilant devra être placé car sa largeur doit idéalement correspondre à celle du texte (avec une petite astuce pour les designs responsive). Si vous avez plusieurs textes de longueurs différentes à animer, il faudra créer des classes de taille, ou bien décider de ne pas mettre en place la diffusion continue.

Pour des textes plus petits que le conteneur donc cela roule, en prenant en compte les modifs, dans le cas contraire le javascript peut s'avérer d'une grande aide même si ce genre d'effet me paraît dépassé et souvent pénible visuellement !

Invité · 04/01/2017, 20h57

@NoSmoking

1/ (on parle de mon 1er code*)
C'est justment le rôle de <div data-text="...> (en position:absolute) : c'est lui qui va prendre la largeur du texte, et servir de référant au "100%".
0 à 100% -> de <div data-text="...> = la largeur du texte
(et pas du "conteneur principal" <div class="messagedefilant">, dont la largeur ne dépend pas du texte).

[EDIT] * Arggh !! Je n'avais pas vu !
Erreur de "fork" j'ai écrasé mon premier code !! (heureusement copié dans le contenu de mon message)

Le revoici : http://codepen.io/jreaux62/pen/EZYBeW

Là, c'est plus clair

**JefReb** · 05/01/2017, 08h59

moi qui pensais avoir clos le sujet!
Mais je suis d'accord avec nosmoking, il ne faut pas abuser de ce genre d'affichage.

Invité · 05/01/2017, 10h22

Bonjour,

ABCIWEB a fait un script sur les "Objets défilants".

N.B. Je crois qu'on est tous d'accord : il ne faut pas en abuser.

**ABCIWEB** · 05/01/2017, 16h48

@jreaux62 Houlà, tu ressors de vieilles archives ! C'était presque mes débuts en javascript et j'ai développé ce module comme exercice il y a dix ans !

A l'époque j'avais pris en compte le comportement spécifique de IE et j'ai constaté quelques années plus tard que cela posait problème dans certaines configurations avec les navigateurs modernes. Je ne l'ai pas mis à jour car effectivement comme vous le dites cet effet n'est presque plus utilisé.

Si besoin je conseille plutôt d'utiliser les méthodes que vous avez données dans ce topic.

Mais bien sûr comme l'a dit NoSmoking si l'on veut quelque chose de portable et facilement configurable il vaut mieux passer par du javascript.

**NoSmoking** · 07/01/2017, 15h07

Envoyé par JefReb

moi qui pensais avoir clos le sujet!

un sujet n'est jamais clos tant qu'il y a des choses intéressantes à dire

Je me permet donc de rebondir pour ajouter deux/trois trucs !

Envoyé par jreaux62

le défi m'a plu :

et oui il est toujours sympa de regarder plus au fond pour mieux y voir

Là, c'est plus clair

tout à fait !

Ce qui me gène dans l'approche qui est faite, jusqu'à présent, est surtout le fait qu'il faille copier plusieurs fois le code à afficher pour obtenir le résultat, dans une balise ainsi que dans un attribut entre autre ajout de balise inutile dans le document et c'est en cela que l'apport du javascript peut être intéressant, cela voilà on est ici en full CSS.

J'ai regardé également ce qui existait et suis tombé sur peu de liens ce qui tend à montrer que le sujet ne passionne pas les foules et ce à juste titre pour les raisons déjà invoquées.

Une autre approche m'est apparue, je rassure elle est du même tonneau, mais en utilisant cette fois ci les pseudo-éléments :before et :after, l'idée dans ce cas étant de partir du HTML suivant.

Code html :

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

1
2
3
<div class="marque">
    <div data-text="Le texte défilant horizontalement"></div>
</div>

qui m'apparaît comme plus facilement maintenable.

Concernant le CSS du bloc défilant, rien d'original

Code :

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

1
2
3
4
5
6
/* les blocks défilants */
.marque [data-text] {
  white-space: nowrap;
  display: inline-block;
  min-width: 200%;            /* 2 fois la largeur du conteneur */
}

il suffit ensuite d'initialiser les pseudo-éléments comme suit

Code :

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

1
2
3
4
5
6
.marque [data-text]:before,
.marque [data-text]:after {
  content: attr( data-text) "\00A0";  /* plus espace en fin */
  display: inline-block;
  min-width: 50%;                     /* la moitié du parent */
}

pour l'animation rien ne change et l'affectation est faite sur le :before uniquement, le :after suivant le mouvement

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.marque [data-text]:before {
  animation: marque-defil 15s infinite linear;
}
@keyframes marque-defil {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -50%;
  }
}

Nota : la vitesse reste à ajuster suivant les cas.

Je vois quand même 2 inconvénients « majeurs »

Le texte défilant « n'appartient » pas au document, mais à la balise, donc il ne faut pas y mettre d'informations importantes au regard du document.
Cette méthode ne permet pas de traiter du code HTML.

Je vous mets le lien vers la démo : [CSS] Texte défilant.
Voilà ma contribution !

Invité · 07/01/2017, 16h44

Bonjour,

@NoSmoking
J'avais aussi pensé à cette solution, mais avec la même conclusion sur les inconvénients.

J'ai donc relevé le défi CSS + jQuery : http://codepen.io/jreaux62/pen/PWqabY

un code HTML réduit à sa plus simple expression
un code CSS légèrement modifié (par rapport à mon précédent)
un code jQuery court

Et un avantage (parmi d'autres) : la possibilité d'écrire du code formaté (avec des balises HTML) !

Code html :

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

1
2
3
4
5
6
7
<div class="messagedefilant">
  Voici un texte qui doit défiler <b style="font-size:150%;color:green;">horizontalement</b>. Il peut etre encore plus long !---
</div>
 
<div class="messagedefilant">
  texte <u>très</u> court !---
</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
/* 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 {
  position: relative;
  top:0; left:0;
  display: inline-block;
  white-space: nowrap;
  font-size: 2rem;
}
 
.messagedefilant div span:first-child {
  animation: defilement 10s infinite linear;
  background: #cde; /* pour visualiser */
}
 
.messagedefilant div span:last-child {
  position: absolute;
  animation: defilement2 10s infinite linear;
  background: #edc; /* pour visualiser */
}
 
@keyframes defilement {
  0% { margin-left: 0; }
  100% { margin-left: -100%; }
}
 
@keyframes defilement2 {
  0% { margin-left: 100%; }
  100% { margin-left: 0%; }
}

Code jQuery :

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

1
2
3
4
5
6
7
8
9
10
function marqueelike() {
  $('.messagedefilant').each(function() {
    var texte = $(this).html();
    $(this).html('<div><span>' + texte + '</span><span>' + texte + '</span></div>');
  });
}
 
$(window).on('load', function() {
  marqueelike();
});

Défilement horizontal en CSS, d'un texte sans saccades [CSS 3]

CSS

Discussions similaires

Partager

Partager