- Problème pour un code de défilement de texte
- Code ascii de a - Guide
- Code de déverrouillage oublié - Guide
- Code puk bloqué - Guide
- Excel cellule couleur si condition texte - Guide
- Transcription audio en texte word gratuit - Guide
3 réponses
8 sept. 2022 à 15:01
Bonjour,
Le html ne faisant pas de boucle ... tu dois avoir à minima du CSS et/ou du Javascript lié à ceci.
Il faudrait aussi le partager ici.
NB: Merci d'utiliser l'icone qui sert à poster du code sur le forum afin que celui ci soit correctement lisible..
Exact!
Le CSS pour la première boucle :
.container{
overflow:hidden;
width: 100%;
display: flex;
/*transform: translateY(45%);*/
}
.text{
white-space: nowrap;
animation: scrollTxt 4s linear infinite;
color: white;
font-size: 36px;
font-family: poppins;
}
@media screen and (max-with: 1440px){
.text{
font-size: 24px;
}
}
@keyframes scrollTxt{
0%{
transform: translate(0,0);
}
100%{
transform: translate(-50%,0);
}
}
Le CSS pour la deuxième boucle :
.container{
overflow:hidden;
width: 100%;
display: flex;
/*transform: translateY(45%);*/
}
.text{
white-space: nowrap;
animation: scrollTxt 4s linear infinite;
color: white;
font-size: 36px;
font-family: poppins;
}
@media screen and (max-with: 1440px){
.text{
font-size: 24px;
}
}
@keyframes scrollTxt{
0%{
transform: translate(0,0);
}
100%{
transform: translate(-50%,0);
}
}
Merci d'avance,
Bonjour,
Quelqu'un a-t-il une solution pour ce problème ?
Merci,
Salut,
qu'avez vous essayé?
à mon avis le problème vient d'utiliser des espaces insécable( ) ce qui n'est jamais une bonne idée pour une mise en page vu qu'un espace insécable est fait pour définir...un espace insécable( = no breaking space) et non un positionnement.
Il serait plus logique et performant d'utiliser des marges à la place.
Pour répéter une animation plusieurs fois vous pouvez voir du côté de
animation-iteration-count:infinite;
Avec la méthode @keyframes vous pouvez faire plusieurs étapes d'animations CSS et répéter celles ci à l'infini.
https://developer.mozilla.org/fr/docs/Web/CSS/@keyframes
