Faire clignoter un texte

[Résolu/Fermé]
Signaler
-
Messages postés
5840
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
17 mars 2021
-
Bonjour,
J'aurai encore une petite question à poser à Elgazar concernant le script que tu m'a donné hier pour faire clignoter un mot. Cela fonctionne bien avec un mot et si je veux faire clignoter un deuxième mot non justaposé dans le même article cela ne fonctionne pas pour le deuxième mot.
Ce script est uniquement valable pour un seul ou bien faut il rajouté du code pour faire clignoter un deuxième mot ?
Merci beaucoup


6 réponses

Messages postés
5840
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
17 mars 2021
1 270
Pour ajouter un second mot, il faut juste changer l'id du span par exemple
<span id="clignotant1">second mot qui clignote</span>

et ajoutez la ligne dans le javascript juste après l'autre
 var obj = document.getElementById('clignotant1');


attention quand même de ne pas trop en mettre car d'abord c'est assez c... à lire, c'est un frein au référencement (si le mot est important pour ta page, il vaut mieux éviter et mettre un strong pour signaler aux moteurs l'importance du terme ) et cela alourdit le poids de la page pour finalement pas grand chose
Bonsoir
Merci pour la réponse. J'ai recopier le code ci dessous. Dans ce cas de figure mon premier mot ne clignote plus et le nouveaux 1 ne fonctionne pas. Est ce bien comme cela ou dois je recopier:
if (obj.style.opacity >= 0.96){
signe = -1; après chaque ligne('clignotant')
mon deuxième mot est celui ci ?

var obj = document.getElementById('clignotant');
var obj = document.getElementById('clignotant1');

if (obj.style.opacity >= 0.96){
signe = -1;
MERCI
Messages postés
5840
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
17 mars 2021
1 270
j'ai du mal expliquer, chaque mot qui doit clignoter doit avoir un id different par exemple
<span id="clignotant">ici ton mot qui clignote</span>
<span id="clignotant1">second mot qui clignote</span>


ensuite tu rajoutes la ligne getelementbyid correspondant au second id dans le script

<script type="text/javascript">
var signe = -1;
var clignotementFading = function(){
var obj = document.getElementById('clignotant');
var obj = document.getElementById('clignotant1');
if (obj.style.opacity >= 0.96){
signe = -1;
}
if (obj.style.opacity <= 0.04){
signe = 1;
}
obj.style.opacity = (obj.style.opacity * 1) + (signe * 0.04);
};

// mise en place de l appel de la fonction toutes les 0.085 secondes
// Pour arrêter le clignotement : clearInterval(periode);
periode = setInterval(clignotementFading, 45 );
</script>
Merci à tous les deux, je vais suivre vos conseils: un seul clignotement d'autant plus que la note de performance de google n'est pas à 100%
Merci beaucoup pour votre aide
Messages postés
5840
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
17 mars 2021
1 270
sinon il y a la la possibilité (que je ne connaissais pas avant) de mettre le clignotant directement sur la class ce qui simplifiera le code et la mise en place. Chaque fois que tu voudras mettre un mot clignotant, il suffira de l'entourer de la class cligno


le javascript
<script>
var oBlink = null;
function cligno(){
// recup des éléments si pas encore fait
oBlink = oBlink || document.getElementsByClassName("cligno");
var i, nbr= oBlink.length;
for( i=0; i < nbr; i++){
// change visibility suivant le cas
oBlink[i].style.visibility = oBlink[i].style.visibility == 'hidden' ? 'visible' : 'hidden';
}
}
var timer=setInterval( cligno, 800);
</script>


le html

<span class="cligno" >EN HAUT</span><br>
<span class="cligno">au milieu</span>



tu as même la possibilité de décaler le clignotement et de commencer par un mot visible ou invisible (mais je te déconseille d'utiliser cette fonction)

<span class="cligno" style="visibility:hidden">EN HAUT</span>
<span class="cligno">au milieu</span>


Normalement cela fonctionne sur tous les navigateurs sauf ie9 et inferieur
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
696
Bonjour
il y a un moyen plus simple de faire clignoter un mot sans utiliser javascript

<span class="clignote">texte qui clignote</span>
<span class="clignote">autre texte qui clignote</span>


le css

@keyframes fadeinout {
from { opacity: 0; }
50% { opacity: 1;}
to { opacity: 0; }
}
.blink {
animation: fadeinout 2s infinite;
}


2s représente 2 secondes pour chaque clignotement mais comme le dit elgazar faire clignoter du texte c'est a utiliser avec beaucoup de parcimonie
pense que c'est le code de base il faut aussi le faire avec les prefixes vendeur
http://webdesign.igorlaszlo.com/blog/prefixes-vendeurs-css3/

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.