Texte défilant de droite à gauche de l'écran quelle que soit sa longueur
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:
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:
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> |
