Comment faire clignoter un texte sans utiliser blink\ javascript

Fermé
Signaler
-
Messages postés
49
Date d'inscription
mardi 9 mai 2017
Statut
Membre
Dernière intervention
7 janvier 2019
-
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


A voir également:

2 réponses

Messages postés
50796
Date d'inscription
mardi 8 janvier 2008
Statut
Modérateur
Dernière intervention
30 janvier 2021
7 527
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41989 internautes nous ont dit merci ce mois-ci

Messages postés
166
Date d'inscription
dimanche 27 mars 2016
Statut
Membre
Dernière intervention
30 octobre 2021
34
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
);
Messages postés
49
Date d'inscription
mardi 9 mai 2017
Statut
Membre
Dernière intervention
7 janvier 2019

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>