Comment faire défiler du texte en HTML et CSS ?

Réponses rédigées par Antoine

Dernière mise à jour : 2021-03-31 12:53:01

Question

Bonjour, je voudrais créer un bandeau HTML, positionné en bas de page, où y faire défiler du texte, de droite à gauche, un peu comme les bandeaux "breaking news" que l'on voit sur les chaines de TV. Merci pour votre aide.

Réponse

Pour faire défiler du texte en HTML et CSS, et créer un bandeau "breaking news", vous pouvez :

Créer des CLASS CSS pour positionner et concevoir le bandeau.
Utiliser la propriété CSS animation pour définir les propriétés de l'animation.
Utiliser la fonction translate3d() pour le défilement.
Appliquer des règles @keyframes pour définir les séquences de l'animation CSS.

Voici un exemple pour faire défiler du texte en HTML et CSS, en bas de page, sous la forme d'un bandeau d'actualité :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment faire défiler du texte en HTML et CSS ?</title>
<style>
.position {
  position: fixed;
  bottom: 0;
  left: 0;
}

.logo {
  height: 50px;
  width: 150px;
  line-height: 50px;
  font-size: 25px;
  color: white;
  background-color: red;
  text-align: center;
}

.bandeau {
  width: 100%;
  overflow: hidden;
  height: 50px;
  background-color: #000;
  padding-left: 100%;
  margin-left: 150px;
}

.actu {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  white-space: nowrap;
  padding-right: 100%;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: actu;
  animation-name: actu;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
}

.actu_titre {
  display: inline-block;
  padding: 0 25px;
  font-size: 25px;
  color: white;
}

@-webkit-keyframes actu {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes actu {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
</style>
</head>
<body>
<div class="position logo">NEWS</div>
<div class="position bandeau">
<div class="actu">
<div class="actu_titre">Comment faire défiler un premier texte en HTML et CSS ?</div>
<div class="actu_titre">Comment faire défiler un second texte en HTML et CSS ?</div>
<div class="actu_titre">Comment faire défiler un troisième texte en HTML et CSS ?</div>
<div class="actu_titre">Comment faire défiler un quatrième texte en HTML et CSS ?</div>
<div class="actu_titre">Comment faire défiler un cinquième texte en HTML et CSS ?</div>
</div>
</div>
</body>
</html>