Menu

Comment faire clignoter un texte sans utiliser blink\ javascript

zahaëra2.0 - 9 déc. 2017 à 16:51 - Dernière réponse : Gardeboue 45 Messages postés mardi 9 mai 2017Date d'inscription 30 avril 2018 Dernière intervention
- 7 févr. 2018 à 22:56
Bonjour,
je suis élève et je voudrait savoir comment on fait pour qu,un texte clignote sans utiliser la balise blink ni le javascript


Afficher la suite 

Votre réponse

5 réponses

Chris 94 54352 Messages postés mardi 8 janvier 2008Date d'inscriptionModérateurStatut 27 mai 2018 Dernière intervention - 9 déc. 2017 à 16:57
Commenter la réponse de Chris 94
1Seb 99 Messages postés dimanche 27 mars 2016Date d'inscription 26 mai 2018 Dernière intervention - 10 déc. 2017 à 17:03
0
Merci
Bonjour,

Il est possible de faire clignoter un texte avec l'animation en css3

https://www.w3schools.com/css/css3_animations.asp

Exemple :

<!DOCTYPE html>
<html>
<head>
<style> 
p {
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
        100% {color:red;}
}

/* Standard syntax */
@keyframes example {
    100% {color:red;}
}
</style>
</head>
<body>

<p><b>Mon texte clignotant.</p>

<div></div>

</body>
</html>

La question étant en JavaScript il faudra utiliser setInterval voire requestAnimationFrame.
Le principe est on ne peut plus simple:
un coup on affiche le texte un cou on affiche rien du tout.
<p id=blink>
</p>

window.setInterval(
let cpt=0;// 'let' est equivalent de 'var' en mieux en ES6(dernière version de JS) 
let clignote= document.getElementById('blink');
if(Math.floor(cpt/2) === cpt/2){
clignote.innerHTML='je clignote a chaque seconde';
}else{
clignote.innerHTML='';
}
cpt++;
);
Oups j'en ai oublié un bout !
LE SCRIPT AU DESSUS EST ÉVIDEMMENT FAUX(pas pu modifier)

let cpt=0;// 'let' est equivalent de 'var' en mieux en ES6(dernière version de JS)
let clignote= document.getElementById('blink');
window.setInterval(
function(){

if(Math.floor(cpt/2) === cpt/2){
clignote.innerHTML='je clignote a chaque seconde';
}else{
clignote.innerHTML='';
cpt++;
},1000
);
Gardeboue 45 Messages postés mardi 9 mai 2017Date d'inscription 30 avril 2018 Dernière intervention - 7 févr. 2018 à 22:56
Clignotement par opacité
Dans le fichier HTML
<label id="LblClignotant">Le texte à faire clignoter</label>

Et le code JS
<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>


Clignotement par tout ou rien
Dans la page HTML
<div id="DivClignotante" style="visibility:visible;"> 
   Exemple de texte clignotant par visibilité 
</div> 

Et le JS associé
<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> 
Commenter la réponse de 1Seb