[Aide] Défilement sans rupture

Bonjour, j'ai besoin de votre aide une nouvelle fois. J'ai été aidée sur le support pour une bande défilante. La base est bonne mais j'ai un soucis de fluidité. Pour vous expliquer plus précisément, j'avais souhaité un défilant a une allure assez rapide, puis un ralentissement et assez rapide de retour). Toryudo, m'a proposé une image (plus simple selon lui). Ok pour moi (peu importe texte ou image). Là, où cela pose problème, c'est que le défilant fait apparemment, comme une boucle et à chaque fin de boucle fait un rebond pas très esthétique, pour ensuite repartir dans une nouvelle boucle similaire. Alors , j'aurai voulu de l'aide pour améliorer ce code et supprimer ce rebond pour un rendu fluide. Merci beaucoup.

Raison de la demande (correction de bug, demande d'avis sur un code, autre chose ?) : amélioration d'un code
Solutions déjà essayées : j'ai fait des recherches sur internet mais je tombe sur les Key Frame, le tuto ici également, je n'ai pas su comment l'adapter.
But à atteindre : une fluidité dans le défilant, supprimer le rebond à chaque boucle de retour.
Code :

Code:

#defilback {
  position: absolute;
  top: 550px;
  width: 100%;
  height: 138px;
  border: 0 solid #000;
  background-image: url(https://www.zupimages.net/up/23/36/qp88.png);
  background-position: 0;
  animation: defilbackmove ease-in-out 20s infinite;
}

Je précise qu'il y a eu un ajustement sur un template overall header en raison de la particularité de mon forum.

Code:

<div id="emplacementAccueil"></div>
 
<div id="wrap">
 
    <!-- BEGIN switch_ticker -->

Le forum où vous pouvez voir l'anomalie en direct :
https://bubblegum.forumactif.com

l'image utilisée :

https://zupimages.net/up/23/39/vf9h.png

Bonjour éléna !

J'ai bien vu ta demande, mais je dois t'avouer que je ne la trouve pas très sympa pour la première personne qui t'a aidé.
En effet, je n'aimerai pas qu'on aille demander ailleurs de l'aide pour un code que j'ai fournis lors d'une aide.

As-tu déjà essayé de demander de l'aide à la personne qui t'a fait le code ?

Bonne soirée

Bonsoir Mäven. Cette personne m'a apporté une réponse selon ses compétences. Bien entendu, que j'ai été clair dans ma demande au départ. Je pense qu'il ne peut pas aller au delà de ses connaissances et je n'oserai pas insister avec "grossièreté". C'est pour cette raison que je demande un complément ici. Avec son accord et sa suggestion privée j'ai cité la Tambouille par honnêteté. Donc non, il ne faut pas voir du négatif dans ma demande envers qui que ce soit. Bien sur, au final,  c'est toi qui décide si tu veux m'aider ou pas.
Bonne soirée également.

Ca marche, si c'est vu avec la personne ça me convient.

Je m'en occupe le plus rapidement possible. Je n'ai juste pas le temps de regarder ce soir

Hello !

Alors, est-ce que quelque chose comme ça t'irait ?

voilà mon texte qui défile exactement comme je le souhaite et il n'y a pas de coupure avant que ça reparte de 0. voilà mon texte qui défile exactement comme je le souhaite et il n'y a pas de coupure avant que ça reparte de 0.

Bonjour Mäven, merci beaucoup, peut on ralentir un peu quand cela fait plus rapide stp ? Cela part d'un seul coup, une possibilité de faire plus progressif ? Que la transition soit plus en douceur.

Hop, tout est faisable.

Un peu comme ça ?

Après je peux te donner le code et que tu joues un peu avant pour tester différentes valeurs ?

voilà mon texte qui défile exactement comme je le souhaite et il n'y a pas de coupure. voilà mon texte qui défile exactement comme je le souhaite et il n'y a pas de coupure.

Coucou Mäven, oui on peut faire comme ça. Merci beaucoup.

OK alors voici la petite astuce.

On va mettre voir 2 voir 3 span si besoin qui contiennent exactement la même chose.

Code:

<p class="defilement" style="display:flex;"><span>voilà mon texte qui défile exactement comme je le souhaite et il n'y a pas de coupure. </span><span>voilà mon texte qui défile exactement comme je le souhaite et il n'y a pas de coupure. </span></p>

Et voila la CSS :

Code:

@keyframes Defilement {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
p.defilement {
    width: 100%;
    overflow: hidden;
}
p.defilement span {
    height: 70px;
    white-space: nowrap;
    font-size: 70px;
    line-height: 70px;
    animation: cubic-bezier(0, 0.42, 1, 0.58) Defilement 15s infinite;
}

Je t'invite à lire ce tutoriel pour comprendre les keyframes, et à te renseigner un petit peu sur le cubic-bezier sur internet
Si tu as des questions je reste dispo

Coucou Mäven. J'ai un gros soucis avec le positionnement. Le défilant doit se trouver juste en dessous de l'image et il doit défiler sur toute la largeur du forum. (J'ai des widgets). Merci.

Coucou Mäven Ma demande est toujours d'actualité. As-tu trouvé une solution pour le positionnement stp ?

Hello !

Je me permets de te renvoyer vers ce sujet dans lequel on explique qu'on a notre vie privée, et qu'on passe quand on le peut...
Je ne t'ai pas oublié, on a simplement tous une vie IRL et la mienne est particulièrement chargée en ce moment. Je ne pense pas que 6 jours sans réponse soit une raison pour me relancer....

Je vois que le code n'est pas en place sur ton forum... Comment et où l'avais-tu mis ?
On va se servir du même genre d'astuce que pour l'image du dessus pour bien le positionner

Coucou Mäven, j'avais simplement mis ton code sur la page d'accueil via le le panneau administration comme ceci.

Panneau admin

page accueil :



CSS



Le rendu :



Du coup, il y a un décalage sur mes widgets.
J'aimerai que le défilant se place juste en dessous de l'image donc au dessus de la pub et sur toute la largeur du forum stp.

Merci beaucoup. Bonne journée.

Hello !

Comme je l'ai dit sur d'autres sujets, mes mois de septembre et octobre ont été compliqué. Mes excuses pour le retard.

Je vois que tu l'as mis en place sur ton forum, tu as donc trouvé une solution ?