18049 sujets

Questions générales et questions de débutants

Texte défilant

Bonjour
Je voudrais simplement faire défiler un bout de texte, comme avant on faisait pour "marquee"
Pour la css j'ai écrit (copié-collé pour être exact Smiley smile :

.blonk {
     animation-duration: 3s;
     animation-name: blonk;
        }

@keyframes blonk {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}


Et pour le html :

<p id="blonk">kling klong</p>


Où ai-je m... ? seul le texte s'affiche (encore heureux ! ) mais ne bouge pas.
J'ai essayé avec une classe, une div avec span class... Rien.
Merci à vous et bonne fin de journée
Yves
Modifié par y-forums (11 Jul 2024 - 16:59)
salut
avec class au lieu de id sur le <p>
et pas besoin de width


<style>
.blonk {
animation: blonk linear 3s infinite;
}

@keyframes blonk {
from {margin-left: 100%;}
to {margin-left: 0%;}
}
</style>

 </head>
 <body>

<p class="blonk">kling klong</p>


et si çà doit sortir du champ tu met:

@keyframes blonk {
from {margin-left: 120%;}
to {margin-left: -20%;}
}

Modifié par drphilgood (11 Jul 2024 - 18:21)
Modérateur
Hello,

Un white-space: nowrap est à ajouter afin qu'il n'y ait pas ce bug au début de l'anim. On me dit dans l'oreillette que le marquis n'aime pas ça pour des raisons d'usurpation d'identité. De toutes manières, le marquis est un vieil homme sans intérêt
Modifié par niuxe (11 Jul 2024 - 18:34)
Merci à tous les deux pour vos réponses.
Je ne comprend pas du tout le problème du marquis avec les wrap, c'est pourtant délicieux en utilisant les feuilles de tacos.
je me demande si un changement de couleur serait opportun.
et peut être aussi des étoiles clignotantes.

.blonk {
font-family: impact;
font-size: 2rem;
font-weight: 600;
color: #0a0;
animation: blonk linear 6s infinite;
white-space: nowrap;
}
    @keyframes blonk {
0% {margin-left: 120%;}
20% {color: #0a0;}

21% {color: #a0a;}
40% {color: #a0a;}

41% {color: #0af;}
60% {color: #0af;}

61% {color: #fa0;}
80% {color: #fa0;}
100% {margin-left: -20%;}
}
Bonjour
Je déteste le texte défilant, le pire étant animation infinite, ça me soule avant même de voir le résultat.

Là c'est le grand sachem de mon club qui m'a demandé de faire ça sur notre site.
J'envisage même de mettre un lien dans le paragraphe et de faire un changement de pointeur en javascript, histoire d’alléger la page, et de mettre le tout dans le header pour l'avoir sur toutes les pages du site. Smiley biggrin
Je viens de voir, c'est vraiment atroce, la police impact amenant un plus.
Ce que je ne pige pas, c'est pourquoi quand je met le style dans le fichier (header) ça marche et que si je le met dans la css ça marche pas...
Bonne journée,
Yves
Modifié par y-forums (12 Jul 2024 - 18:37)
Prévenir un modérateur
Répondre au sujet
Aller à