Comment faire clignoter un texte sans utiliser blink\ javascript
zahaëra2.0
-
Gardeboue Messages postés 49 Date d'inscription Statut Membre Dernière intervention -
Gardeboue Messages postés 49 Date d'inscription Statut Membre Dernière intervention -
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
je suis élève et je voudrait savoir comment on fait pour qu,un texte clignote sans utiliser la balise blink ni le javascript
2 réponses
-
Bonjour,
Sur du papier ? Hmm, très difficile !
Tu es élève et tu dois rendre le devoir quand ?CCM ne fait pas les exercices !.. De l'aide peut être demandée si on montre l'avancée du travail qu'on a soi-même réalisé. Il faut, bien sûr, que le sujet relève de l'informatique.
-
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
); -
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>
-
