Texte défilant de droite à gauche de l'écran quelle que soit sa longueur

**mhoof** · 19/04/2024, 17h07

Bonjour à tous,

Je cherche à déplacer un texte qui part de la gauche de l'écran, le traverse, et réapparaît à gauche dès sa sa sortie de l'écran.
Le code de ma page html/css fait le boulot car dans ce cas mon texte fait 1907px soit à peu près les 100vw de mon écran.
Mais évidement ça ne marche plus si le texte est plus long, il disparaît avant sa fin, ou plus court, il met un temps fou à réapparaître.

Pour bien le repositionner, j'aimerai donc pouvoir donner automatiquement sa largeur réelle dans :

Code CSS :

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

1
2
3
4
@keyframes defilement {
  0% { transform: translateX(Largeur réelle du texte px); }
  100% { transform: translateX(- Largeur réelle du texte px); }
}

Ou gérer l'animation directement en javascript

Je suis un "bricoleur" en JS. Je n'ai pas trouvé de code à adapter et mes essais from scratch sont pitoyables :((

Si quelqu'un peut me donner des pistes, voire résoudre le truc...

D'avance merci

Code html :

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
  <title>B-test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta charset="utf-8">
</head>
<style>
html {
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: sans-serif;
  font-weight: 900 ;
  font-size: 300%;
}
article{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
}
p{
  position: relative;
  left: 0;
  white-space: nowrap;
  animation: defilement 20s infinite linear;
  margin: 0;
  font-size: 1.5rem;
}
@keyframes defilement {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-100vw); }
}
</style>
<body>
  <article>
    <p id="txtBanderole">Ex his quidam aeternitati se commendari posse per statuas aestimantes </p>
  </article>
  <script>
  var longueurTxt = document.getElementById('txtBanderole').clientWidth;
  alert(longueurTxt);
  </script>
</body>
</html>

**NoSmoking** · 19/04/2024, 17h54

Bonjour et bienvenue sur DVP.
Je pense tout d'abord qu'il s'agit plutôt de réaliser un défilement de droite à gauche !

Pour ce faire le CSS suffit, une solution :

↪ Texte défilant avec départ à droite

**mhoof** · 19/04/2024, 23h48

NoSmoking merci !

Je suis un peu dyslexique de la droite et de la gauche

Le css de ton exemple fonctionne parfaitement.
C'est ma façon de positionner le texte à l'extérieur de l'écran qui était foireuse.

Maintenant, là où JS pourrait m'être utile, c'est pour modifier le temps de défilement du texte en fonction de sa longueur.
C'est à dire pouvoir changer dynamiquement -> animation: defilement ??s infinite linear;
Est-ce possible sans créer une usine à gaz ?

Merci de ta réponse

**NoSmoking** · 20/04/2024, 07h49

Titre corrigé !

Pour la mise à jour dynamique tu peux utiliser les variables CSS.
En déclarant dans ton CSS, par exemple :

Code css :

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

1
2
3
4
5
6
7
8
9
10
p {
  --tps: 0;        /* la variable à modifier */
  position: relative;
  left: 0;
  margin: 0;
  padding-left: 100%;
  font-size: 1.5rem;
  white-space: nowrap;
  animation: defilement var(--tps) infinite linear;  /* utilisation de ta variable */
}

tu peux ensuite dans ton script la modifier de la façon suivante :

Code :

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

1
2
3
const elem = document.getElementById('txtBanderole');
const tps = elem.clientWidth / 200;           // 200 pixels/seconde par exemple
elem.style.setProperty("--tps", tps + "s");   // modif variable CSS

... cette nouvelle valeur sera prise en compte immédiatement.

Ressource :

Les variables CSS

**mhoof** · 20/04/2024, 10h27

Bonjour NoSmoking

Je me servais des variables css de façon basique : définir une couleur, une taille de typo...
Ta réponse m'ouvre de nouveaux horizons!

Encore un grand merci

Texte défilant de droite à gauche de l'écran quelle que soit sa longueur

JavaScript

Discussions similaires

Partager

Partager