Texte défilant jQuery

Par Jérémie, il y a 3 ans

Javascript

Bonjour,
J'avais un compte avant, mais impossible de retrouver le pseudo. J'avais posté la même question (désolé), cela fait bien longtemps.

Alors je cherche une bibliothèque (elle existe, impossible de la retrouver) afin de faire ceci :

Une barre avec un phrase dedans puis le texte disparait pour en afficher un autre, sous forme de transition sympathique et ainsi de suite. Avec un temps pour lire la phrase. Un peu comme sur BFMTV dans la barre du bas.

J'espère que quelqu'un a un script js ou une idée du site ou on peut en trouver un.

Un code type avec des
<a>texte</a>
<a>texte 2</a>

Merci par avance!

9 réponses

Jérémie, il y a 3 ans

Je teste demain, merci beaucoup! Je ne suis pas formé en js malheureusement alors impossible pour moi de réaliser des scripts comme ceci.

Dernier petit soucis que je n'ai pas précisé, comment arrêter le message quand on passe la souris dessus (histoire de cliquer si je met un lien hypertexte dedans :D)

Merci en tout cas pour l'aide

popotte, il y a 3 ans

Hello

Alors pour ce genre de choses pas besoin de librairie tu peux faire un script tout simplement ^^

/* HTML */ <div id="text-container"> <p id="text-1" class="hidden"> Texte </p> <p id="text-2" class="hidden"> Texte </p> <p id="text-3" class="hidden"> Texte </p> <p id="text-4" class="hidden"> Texte </p> <!-- ... --> </div> /* CSS */ .hidden { display: none; } /* JS */ const container = document.getElementById('text-container') const elements = container.children let current = 0 async setInterval(switchText, 3000) /* Texte qui disparait/apparait toutes les 3secondes */ async function switchText() { // Async pour que chaque process attende son tour await hide() // On passe le précédent en display none await show() // On affiche le texte actuel if (current === elements.length) { current = 0 // On repasse la boucle a zéro } } function hide() { let target = current > 0 ? current - 1 : current.length // On définit le bon index if (!elements[target].classList.contains('hidden')) { // Pour gérer la première loop elements[target].classList.add('hidden') } } function show() { elements[current++].classList.remove('hidden') // current++, ça te donne la valeur du current et ensuite ça incrémente de 1 // Si tu veut que current s'incrémente de 1 et ENSUITE avoir la valeur de current après incrémentation faut faire ++current // Normalement ++current mais je le dis au cas où tu dois ajuster avec ++current ^^ } /* Si la première loop se déclenche immédiatement tu peux mettre l'interval dans un timeout */ setTimeout(switchText, 3000) // Déclenchement dans 3secondes

Grosso merdo, faudra ajuster selon les bugs mais dans l'idée ça devrait te faire ton intervale :p

popotte, il y a 3 ans

Avec plaisir ^^

Ah oui il faudrait que tu apprennes un peu les bases de js pour comprendre, firefox a fait une doc assez complete pour ca https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics ensuite c'est comme des dominos à assembler avant de pousser le premier domino :p et pour les utilistaires (comme setinterval/setimout) tu recherche comment faire telle ou telle chose en JS et tu vois ce que Javascript propose :p

Pour arreter alors tu peux ajouter un event (ah du coup faudrait que tu apprenne les events :p):

/* JS */ const container = document.getElementById('text-container') const elements = container.children let current = 0 let switchInterval = setInterval(switchText, 3000) /* Texte qui disparait/apparait toutes les 3secondes */ async function switchText() { // Async pour que chaque process attende son tour await hide() // On passe le précédent en display none await show() // On affiche le texte actuel if (current === elements.length) { current = 0 // On repasse la boucle a zéro } } function hide() { let target = current > 0 ? current - 1 : current.length // On définit le bon index if (!elements[target].classList.contains('hidden')) { // Pour gérer la première loop elements[target].classList.add('hidden') } } function show() { elements[current++].classList.remove('hidden') // current++, ça te donne la valeur du current et ensuite ça incrémente de 1 // Si tu veut que current s'incrémente de 1 et ENSUITE avoir la valeur de current après incrémentation faut faire ++current // Normalement ++current mais je le dis au cas où tu dois ajuster avec ++current ^^ } /** * Tu prends tous les elements dans le container, tu fait une boucle avec un map, ça va déclencher une action à chaque élements un par un * A chaque fois que le map passe sur un élement, il enregistre l'élement dans le paramètre "element", et y applique un event "mouseOver" (passage de la souris) * Quand le mouseOver est déclenché tu lance un utilitaire JS "stopInterval" et en paramètre tu met le nom de l'intervale * Et comme le stopInterval a besoin d'un nom, tu doit enregistrer l'interval dans une variable comme fait plus haut */ elements.map((element) => element.addEventListener('mouseOver', stopInterval(switchInterval)))
Jérémie, il y a 3 ans

Bonjour,

encore Merci, je viens de tester le code malheureusement, cela ne fonctionne pas...:( Rien n'apparait, et j'ai inclus bien sur les librairies (elles fonctionnent j'ai testé un alert() ).
C'est bizarre...

popotte, il y a 3 ans

ah, fait voir ton html css et js?

Jérémie, il y a 3 ans

Serait-il possible de mettre le code que tu as fait sur codepen.io, ce sera plus simple car je suis vraiment une bille et j'ai surement oublié quelque chose...:d j'ai pris tout ton code et c'est sur que c'est moi qui ai merdé! :(

Jérémie, il y a 3 ans

Merci beaucoup! J'ai mis en résolu!

popotte, il y a 3 ans

avec plaisir ;)