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

Justin -
Rotor - 14 sept. 2022 à 10:48

Bonjour,

J'ai implanté ce code :

<div class="container">
<span class="text t1">  •  fleurs  •  huiles  •  résines  • brownies  </span>
<span class="text t2"> • tisanes  •  cookies  •  cartridges  •  perles  </span>
<span class="text t3">  •  cvault  •  pastilles  •  kuff  •  financier  </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 :

Merci à vous,

Cordialement,

Justin

Windows / Chrome 104.0.0.0

Afficher la suite

A voir également:

Problème pour un code de défilement de texte
Code ascii - Guide
Code de déverrouillage oublié - Guide
Code puk bloqué - Guide
Code activation windows 10 - Guide
Code de triche gta 4 - Guide

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

Réponse 2 / 3

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,

Réponse 3 / 3

Justin

Bonjour,

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

Merci,

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

Votre réponse

Discussions similaires