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

Justin -  
 Rotor -

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 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     

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

    0
  2. 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,

    0
  3. Justin
     

    Bonjour,

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

    Merci,

    0
    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

      0

Discussions similaires

Touche arrêt défil sur clavier
munette -
Leo -

49 réponses
Excel 365 + Windows 10 Arrêt défilement flèches
VALBRISE -
VALBRISE -

5 réponses