Comment faire clignoter un texte sans utiliser blink\ javascript
Fermé
zahaëra2.0
-
9 déc. 2017 à 16:51
Gardeboue Messages postés 49 Date d'inscription mardi 9 mai 2017 Statut Membre Dernière intervention 7 janvier 2019 - 7 févr. 2018 à 22:56
Gardeboue Messages postés 49 Date d'inscription mardi 9 mai 2017 Statut Membre Dernière intervention 7 janvier 2019 - 7 févr. 2018 à 22:56
A voir également:
- Faire clignoter un texte html en couleur
- Excel cellule couleur si condition texte - Guide
- Mettre un texte en majuscule - Guide
- Somme si couleur - Guide
- Comment retranscrire un entretien audio en texte - Guide
- Editeur html - Télécharger - HTML
2 réponses
Chris 94
Messages postés
50978
Date d'inscription
mardi 8 janvier 2008
Statut
Modérateur
Dernière intervention
17 février 2023
7 323
9 déc. 2017 à 16:57
9 déc. 2017 à 16:57
Bonjour,
Sur du papier ? Hmm, très difficile !
Tu es élève et tu dois rendre le devoir quand ?
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.
1Seb
Messages postés
166
Date d'inscription
dimanche 27 mars 2016
Statut
Membre
Dernière intervention
30 octobre 2021
37
10 déc. 2017 à 17:03
10 déc. 2017 à 17:03
Bonjour,
Il est possible de faire clignoter un texte avec l'animation en css3
https://www.w3schools.com/css/css3_animations.asp
Exemple :
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.
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
);
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
Messages postés
49
Date d'inscription
mardi 9 mai 2017
Statut
Membre
Dernière intervention
7 janvier 2019
7 févr. 2018 à 22:56
7 févr. 2018 à 22:56
Clignotement par opacité
Dans le fichier HTML
Et le code JS
Clignotement par tout ou rien
Dans la page HTML
Et le JS associé
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>
