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 :
Ou gérer l'animation directement en javascript
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); } }
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>
Partager