Accueil    Codes    Texte clignotant
 



Texte clignotant  Texte clignotant




Présentation



Voici différentes méthodes permetant de mettre en place un texte clignotant, en utilisant le style visibility ou le style opacity associés à la méthode setInterval.

Exemples de rendu :


Exemple de texte clignotant par visibilité






Texte clignotant avec le style css visibility





<div id="DivClignotante" style="visibility:visible;">
   Exemple de texte clignotant par visibilité
</div>



<script type="text/javascript">
var clignotement = function(){
   if (document.getElementById('DivClignotante').style.visibility=='visible'){
      document.getElementById('DivClignotante').style.visibility='hidden';
   }
   else{
   document.getElementById('DivClignotante').style.visibility='visible';
   }
};

// mise en place de l appel de la fonction toutes les 0.8 secondes
// Pour arrêter le clignotement : clearInterval(periode);
periode = setInterval(clignotement, 800);
</script>


Texte clignotant avec le style css opacity





<label id="LblClignotant">Exemple de texte clignotant par opacité</label>



<script type="text/javascript">
var signe = -1;
var clignotementFading = function(){
   var obj = document.getElementById('LblClignotant');
   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, 85 );
</script>