Problème pour un code de défilement de texte

Justin -  

Bonjour,

J'ai implanté ce code :

<div class="container">
    <span class="text t1"> &nbsp;&bull;&nbsp; fleurs &nbsp;&bull;&nbsp; huiles &nbsp;&bull;&nbsp; résines &nbsp;&bull;&nbsp;brownies &nbsp;</span>
    <span class="text t2"> &bull;&nbsp;tisanes &nbsp;&bull;&nbsp; cookies &nbsp;&bull;&nbsp; cartridges &nbsp;&bull;&nbsp; perles &nbsp;</span>
    <span class="text t3"> &nbsp;&bull;&nbsp; cvault &nbsp;&bull;&nbsp; pastilles &nbsp;&bull;&nbsp; kuff &nbsp;&bull;&nbsp; financier &nbsp;</span>
</div>

Il permet de faire défiler des mots séparés de points à l'infini, mais deux mots se resserrent à un moment (brownies et tisanes) ce qui fait que la boucle "bug" et saute à un moment.

J'ai un problème similaire avec la boucle de texte ci-dessous mais de manière moins prononcée :

<div class="container">
    <span class="text t1"> &nbsp;&bull;&nbsp; @cbde.fr &nbsp;&bull;&nbsp; @cbde.fr &nbsp;&bull;&nbsp; @cbde.fr &nbsp;&bull;&nbsp; @cbde.fr &nbsp;</span>
    <span class="text t2"> &nbsp;&bull;&nbsp; @cbde.fr &nbsp;&bull;&nbsp; @cbde.fr &nbsp;&bull;&nbsp; @cbde.fr &nbsp;&bull;&nbsp; @cbde.fr &nbsp;</span>
    <span class="text t3"> &nbsp;&bull;&nbsp; @cbde.fr &nbsp;&bull;&nbsp; @cbde.fr &nbsp;&bull;&nbsp; @cbde.fr &nbsp;&bull;&nbsp; @cbde.fr &nbsp;</span>
</div>

Merci à vous,

Cordialement,
 

Justin


Windows / Chrome 104.0.0.0

3 réponses

  1.  jordane45 Modérateur

    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..

    1. Justin

      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,

      1. Justin

        Bonjour,

        Quelqu'un a-t-il une solution pour ce problème ?

        Merci,

        1. Rotor

          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(&nbsp= 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

      Discussions similaires

      Excel 365 + Windows 10 Arrêt défilement flèches
      VALBRISE

      5 réponses
      Touche arrêt défil sur clavier
      munette

      49 réponses
      Excel : les flèches déplacent le document
      Hypergonar

      2 réponses