Aller au contenu
  • Veuillez ne pas poster de message pour but d'insulter, incitation à la haine, propos sexuels et tout autre qui ne respecte pas nos conditions générales !

JS SLIDER TEXT


Kas

Messages recommandés

Bonsoir, je n'ai aucune base en js et, je voudrais reproduire un slider comme sur la chaine BFMTV (le texte tout en bas NEWS 24/7) que l'on voit dans leurs émissions, qui pourrait m'aider, merci :)

 

TEXTE 1 -> TEXTE 2 -> TEXTE 3 -> TEXTE 4

Lien à poster
Partager sur d’autres sites

Salut,

 

Pour éviter de t'embêter, tu as une balise en HTML pour faire exactement pareil :)

<marquee>Le texte à faire défiler</marquee>

Si tu veux plus d'informations, je t'invite à aller sur ce site: 

Pour avoir accès à ce lien, merci de vous connecter.

 

 

- Rick

Lien à poster
Partager sur d’autres sites

  • Modérateur

Effectivement, le marquee html est 1000 fois plus simple que le JS mais si tu insistes vraiment ,avec mon ami google , j'ai trouvé ceci : 

Pour avoir accès à ce lien, merci de vous connecter.

 (attention, il faut 2 librairies JS, voir les paramètres du site dans l'onglet JS )

 

~ Henri

Développeur WEB, NodeJS et C

 

Discord: Henri#003

Twitter: @UnrealHenri

Lien à poster
Partager sur d’autres sites

Il y a 15 heures, Rick a dit :

Salut,

 

Pour éviter de t'embêter, tu as une balise en HTML pour faire exactement pareil :)


<marquee>Le texte à faire défiler</marquee>

Si tu veux plus d'informations, je t'invite à aller sur ce site: 

Pour avoir accès à ce lien, merci de vous connecter.

 

 

- Rick

Obsolète ;) 

 

Tiens 

Pour avoir accès à ce lien, merci de vous connecter.

 tu as la doc détaillé ainsi que la librairie, si tu suis correctement en 5 minutes t'a fini

 

 

Il y a 14 heures, Romuald-ROCMS a dit :

J'aime pas dire sa mais google est ton ami même sans connaissance avec de la bonne foie tu va y arriver, bon courage

Aucun intérêt de poster un message comme ça, il demande de l'aide pas une leçon de moral 

JavaScript for ever

Lien à poster
Partager sur d’autres sites

Il y a 5 heures, Arwantys a dit :

Obsolète ;) 

 

Tiens 

Pour avoir accès à ce lien, merci de vous connecter.

 tu as la doc détaillé ainsi que la librairie, si tu suis correctement en 5 minutes t'a fini

 

Ah je savais pas, je t'avoue que cela fait longtemps que je n'ai pas fait de page avec ces balises ! :ah:

Merci pour la librairie du coup :)

Lien à poster
Partager sur d’autres sites

<div id="news1">
<div id="texti">
	<table width="50%" align="center">
<tr>
<td>
<div class="slide">
<ul>
<li>
<a style="font-size: 25px;line-height: 25px;color:white;justify-content: center;align-items: center;padding: 0px 170px;display: flex;margin-top: 5px;width: 1728px;">1 inshare c'est super, on ne s'ennuie pas, on se réjouit de voir le nouveau membre chaque mois le nouveau membre, l'équipe admin est cool je trouve (suce boules) !!!!!!!!!!!!!!!!!</a>
</li>
<li>
<a style="font-size: 25px;line-height: 25px;color:white;justify-content: center;align-items: center;padding: 0px 170px;display: flex;margin-top: 5px;width: 1728px;margin-left: 50%;">2 inshare c'est super, on ne s'ennuie pas, on se réjouit de voir le nouveau membre chaque mois le nouveau membre, l'équipe admin est cool je trouve (suce boules) !!!!!!!!!!!!!!!!!</a>
</li>
<li>
<a style="font-size: 25px;line-height: 25px;color:white;justify-content: center;align-items: center;padding: 0px 170px;display: flex;margin-top: 5px;width: 1728px;margin-left: 100ù;">3 inshare c'est super, on ne s'ennuie pas, on se réjouit de voir le nouveau membre chaque mois le nouveau membre, l'équipe admin est cool je trouve (suce boules) !!!!!!!!!!!!!!!!!</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
</div>

 

Lien à poster
Partager sur d’autres sites

Il y a 8 heures, Arwantys a dit :

Obsolète ;) 

 

Tiens 

Pour avoir accès à ce lien, merci de vous connecter.

 tu as la doc détaillé ainsi que la librairie, si tu suis correctement en 5 minutes t'a fini

 

 

Aucun intérêt de poster un message comme ça, il demande de l'aide pas une leçon de moral 

Merci pour ta réponse qui m'oriente, cependant entre temps j'ai trouvé un code css animation voici le code :

html

<div id="news1">
<div id="texti">
	<table width="50%" align="center">
<tr>
<td>
<div class="slide">
<ul>
<li>
<a style="font-size: 25px;line-height: 25px;color:white;justify-content: center;align-items: center;padding: 0px 170px;display: flex;margin-top: 5px;width: 1728px;">1 inshare c'est super, on ne s'ennuie pas, on se réjouit de voir le nouveau membre chaque mois le nouveau membre, l'équipe admin est cool je trouve (suce boules) !!!!!!!!!!!!!!!!!</a>
</li>
<li>
<a style="font-size: 25px;line-height: 25px;color:white;justify-content: center;align-items: center;padding: 0px 170px;display: flex;margin-top: 5px;width: 1728px;margin-left: 50%;">2 inshare c'est super, on ne s'ennuie pas, on se réjouit de voir le nouveau membre chaque mois le nouveau membre, l'équipe admin est cool je trouve (suce boules) !!!!!!!!!!!!!!!!!</a>
</li>
<li>
<a style="font-size: 25px;line-height: 25px;color:white;justify-content: center;align-items: center;padding: 0px 170px;display: flex;margin-top: 5px;width: 1728px;margin-left: 100ù;">3 inshare c'est super, on ne s'ennuie pas, on se réjouit de voir le nouveau membre chaque mois le nouveau membre, l'équipe admin est cool je trouve (suce boules) !!!!!!!!!!!!!!!!!</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
</div>

css

#news1 {
    position: fixed;
    z-index: 999999;
    width: 100%;
    height: 60px;
    bottom: 15px;
    left: 0;
    background: #a1130be6;
    font-size: 120%;
}
.slide {
 width:100%;
 height:60px;
 margin: auto;
 overflow: hidden;
 margin-top: -23px;
}
.slide ul {
 display: flex;
 padding: 0;
 width: 300%;
 animation: cambio 15s infinite alternate linear;
 animation-timing-function: ease-in;
}
.slide li {
 width:100%;
 list-style: none;
}
.slide img {
 width:100%;
}
@keyframes cambio{
 0% { margin-left: 0;}
 20% { margin-left: 0;}
 
 25% { margin-left: -100%;}
 45% { margin-left: -100%;}
 
 50% { margin-left: -200%;}
 70% { margin-left: -200%;}
 
 75% { margin-left: -300%;}
 100% { margin-left: -300%;}
}

la question que je me pose c'est comment faire pour que le texte reste 20s sur le texte 1 puis passe au 2 20sec puis passe au 3 20 sec puis au 1  faisant toujours le même slide de gauche il se casse à droite

Lien à poster
Partager sur d’autres sites

  • Solife à fermer ce/cette sujet
  • Administrateur
    Salut Kas ,
    Ton sujet a été déplacé pour une des deux raisons suivantes :

    - Ta demande a été résolue.

    - Ton sujet se trouvait dans la mauvaise catégorie.

        
      Ceci est un message automatique.

J'essaie de m'adoucir, mais l'humain me rend noir.

Lien à poster
Partager sur d’autres sites

  • 1 mois plus tard...
  • Administrateur
    Salut Kas ,
    Ton sujet a été déplacé pour une des deux raisons suivantes :

    - Ta demande a été résolue.

    - Ton sujet se trouvait dans la mauvaise catégorie.

        
      Ceci est un message automatique.

⠀⠀Founder of Inshare.fr

⠀⠀Baylife moderator

⠀⠀Twitch channel moderator

⠀⠀French translator Trucksbook.eu

𝐹𝑒𝑒𝑙 𝑓𝑟𝑒𝑒 𝑡𝑜 𝑤𝑟𝑖𝑡𝑒 𝑎 𝑐𝑜𝑚𝑚𝑒𝑛𝑡

—————————————————

╱⠀⠀⠀⠀⠀⠀⠀⠀⠀Règlements⠀⠀ //⠀⠀Abonnements⠀⠀ //⠀⠀ Discord   ⠀⠀⠀⠀⠀⠀⠀⠀⠀╲

 

signature.png

Lien à poster
Partager sur d’autres sites

Invité
Ce sujet ne peut plus recevoir de nouvelles réponses.
×
×
  • Créer...