Comment régler les temps de pause et de mouvement ?
Le cycle total dure 12 secondes (12s dans la ligne animation).
Les pourcentages (%) de la règle @keyframes
découpent ce temps de la manière suivante :
• De 0% à 35% (pendant 4,2 secondes) :
Le traîneau avance de la droite vers le milieu de l'écran.
• De 35% à 55% (pendant 2,4 secondes) :
Le traîneau s'arrête complètement car la position reste identique (-40%).
• De 55% à 100% (pendant 5,4 secondes) :
Le traîneau redémarre et sort de l'écran par la gauche.
1. Positionner le traîneau à un endroit fixe sur l'écran
(ex: en bas ou en haut)
Si vous voulez que le traîneau défile toujours
au même endroit de l'écran,
même quand l'utilisateur
fait défiler la page (scrolling),
utilisez le positionnement fixed.
Ajoutez ou modifiez ces lignes dans votre bloc style :
.marquee-container { width: 100%;
overflow: hidden;
white-space: nowrap;
/* --- AJOUTS POUR LE POSITIONNEMENT --- */
position: fixed; /* Reste fixé à l'écran */
left: 0; /* Aligné tout à gauche */
bottom: 20px; /* Place l'animation à 20 pixels du BAS de l'écran */
z-index: 9999; /* S'assure que le traîneau passe au-dessus du reste du site */ }
2. Intégrer l'animation au milieu du contenu de votre page
Si vous préférez que l'animation soit insérée naturellement
entre deux paragraphes ou deux sections
de votre site, utilisez les marges (margins)
pour créer de l'espace.
.marquee-container { width: 100%;
overflow: hidden;
white-space: nowrap;
position: relative;
/* --- AJOUTS POUR LE POSITIONNEMENT --- */
margin-top: 50px; /* Espace de 50px avec le contenu du dessus */
margin-bottom: 50px; /* Espace de 50px avec le contenu du dessous */ }