Discussion :

[andalltha]

Bonjour à toutes et à tous !

Je suis en train de construire un site. C'est un site bizarre, je sais ! Le pied de page fait office de section Actualités. Le texte "This is the news section. We are now on Twitter." doit défiler. Ca marche bien sur ordi (en tout cas sur le mien) mais j'ai l'impression que seulement une partie du texte s'affiche sur mobile (principalement sur téléphone). Pourquoi ? Et comment corriger ça ?

Merci et bonne nuit/journée !

[NoSmoking]

Bonjour,
en fait ton texte passe à la ligne sur des écrans de largeur inférieure à la longueur de ton texte.

Ajoute

Code :

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

1
2
3
.footer {
   white-space: nowrap;
}

[andalltha]

Super, merci beaucoup ! J'avais pas pensé à ça. Le souci, c'est que, encore sur mobile, le défilement du texte s'interrompt brutalement et reprend à zéro une fois que la fin de ce texte apparaît sur l'écran. Le dernier mot du texte doit idéalement défiler jusqu'à ce qu'il disparaisse sur la gauche avant que le premier mot du texte ne réapparaisse sur la droite. Je ne sais pas si je suis très clair !

[NoSmoking]

C'est ton width: 100% qui te pose souci, il faut qu'il fasse la largeur uniquement du texte à afficher.

Pour le départ de l'animation autant mettre ton élément à droite avec un

Code :

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

1
2
3
4
.footer h3 {
    /* width: 100%; */
    padding-left: 100%;
}

et pour l'animation à proprement parler :

Code :

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

1
2
3
4
5
6
7
8
@keyframes footer {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

Regarde ce que j'en ai dit il y à quel temps : Texte défilant avec départ à droite

[andalltha]

Bien vu ! Merveilleux ! Ca fonctionne parfaitement. Merci beaucoup !

[johanpetrikovsky]

J'aime beaucoup ton site en tout cas , très moderne