Bonjour à vous tous,
Je voudrais obtenir un défilement horizontale d'une accroche, de la droite vers la gauche, comme le fait la page d'accueil de ce site web : https://coflix.org/ (le petit bandeau orange en haut).
J'ai fait mes recherches sur MDN pour savoir quelles sont les propriétés CSS à utiliser et comment structurer en HTML et je suis arrivé à ça :
HTML
CSS
J'ai un double problème. Le premier est que la phrase commence à défiler vers la gauche à l'intérieur du bandeau rouge (presque au centre) alors que je voudrais qu'elle entre dans l'écran en partant de l'extrême droite. Le second problème est que je n'arrive pas à contrôler l'épaisseur du bandeau, c'est-à-dire que je voudrais réduire sa hauteur tout en gardant un corps de caractère suffisamment gros, autrement dit, je voudrais un petit padding à l'intérieur parce que je compte utiliser au final une police de caractères de type "dot" comme celle-ci https://fontmeme.com/polices/police-dot-font/ de manière à donner l'impression que les caractères sont digitaux de couleur vert sur fond noir comme l'exemple ci-dessous :
Je n'arrive donc pas à faire démarrer le défilement totalement à droite et je ne contrôle pas non plus l'épaisseur du bandeau. Quelqu'un saurait m'aider ?
Merci pour votre sollicitude et
que le code soit avec vous !
Modifié par ObiJuanKenobi (04 Apr 2023 - 16:41)
Je voudrais obtenir un défilement horizontale d'une accroche, de la droite vers la gauche, comme le fait la page d'accueil de ce site web : https://coflix.org/ (le petit bandeau orange en haut).
J'ai fait mes recherches sur MDN pour savoir quelles sont les propriétés CSS à utiliser et comment structurer en HTML et je suis arrivé à ça :
HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Défilement de texte</title>
</head>
<body>
<div class="defilement-texte bandeau">
<p>Phrase à faire défiler horizontalement</p>
</div>
</body>
</html>
CSS
.defilement-texte {
overflow: hidden;
white-space: nowrap;
}
.defilement-texte p {
display: inline-block;
animation: scroll-left 10s linear infinite;
}
.bandeau{
background-color: red;
color: white;
}
@keyframes scroll-left {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
J'ai un double problème. Le premier est que la phrase commence à défiler vers la gauche à l'intérieur du bandeau rouge (presque au centre) alors que je voudrais qu'elle entre dans l'écran en partant de l'extrême droite. Le second problème est que je n'arrive pas à contrôler l'épaisseur du bandeau, c'est-à-dire que je voudrais réduire sa hauteur tout en gardant un corps de caractère suffisamment gros, autrement dit, je voudrais un petit padding à l'intérieur parce que je compte utiliser au final une police de caractères de type "dot" comme celle-ci https://fontmeme.com/polices/police-dot-font/ de manière à donner l'impression que les caractères sont digitaux de couleur vert sur fond noir comme l'exemple ci-dessous :
Je n'arrive donc pas à faire démarrer le défilement totalement à droite et je ne contrôle pas non plus l'épaisseur du bandeau. Quelqu'un saurait m'aider ?
Merci pour votre sollicitude et
que le code soit avec vous !
Modifié par ObiJuanKenobi (04 Apr 2023 - 16:41)
