Faire clignoter un texte
Résolu/Fermé
finette35
-
1 févr. 2015 à 16:53
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 - 2 févr. 2015 à 10:14
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 - 2 févr. 2015 à 10:14
A voir également:
- Texte clignotant
- Excel cellule couleur si condition texte - Guide
- Mettre un texte en majuscule - Guide
- Transcription audio en texte word gratuit - Guide
- Texte barré whatsapp - Guide
- Copier texte pdf - Guide
6 réponses
elgazar
Messages postés
5841
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
17 mars 2021
1 322
Modifié par elgazar le 1/02/2015 à 17:09
Modifié par elgazar le 1/02/2015 à 17:09
Pour ajouter un second mot, il faut juste changer l'id du span par exemple
et ajoutez la ligne dans le javascript juste après l'autre
attention quand même de ne pas trop en mettre car d'abord c'est assez c... à lire, c'est un frein au référencement (si le mot est important pour ta page, il vaut mieux éviter et mettre un strong pour signaler aux moteurs l'importance du terme ) et cela alourdit le poids de la page pour finalement pas grand chose
<span id="clignotant1">second mot qui clignote</span>
et ajoutez la ligne dans le javascript juste après l'autre
var obj = document.getElementById('clignotant1');
attention quand même de ne pas trop en mettre car d'abord c'est assez c... à lire, c'est un frein au référencement (si le mot est important pour ta page, il vaut mieux éviter et mettre un strong pour signaler aux moteurs l'importance du terme ) et cela alourdit le poids de la page pour finalement pas grand chose
Bonsoir
Merci pour la réponse. J'ai recopier le code ci dessous. Dans ce cas de figure mon premier mot ne clignote plus et le nouveaux 1 ne fonctionne pas. Est ce bien comme cela ou dois je recopier:
if (obj.style.opacity >= 0.96){
signe = -1; après chaque ligne('clignotant')
mon deuxième mot est celui ci ?
var obj = document.getElementById('clignotant');
var obj = document.getElementById('clignotant1');
if (obj.style.opacity >= 0.96){
signe = -1;
MERCI
Merci pour la réponse. J'ai recopier le code ci dessous. Dans ce cas de figure mon premier mot ne clignote plus et le nouveaux 1 ne fonctionne pas. Est ce bien comme cela ou dois je recopier:
if (obj.style.opacity >= 0.96){
signe = -1; après chaque ligne('clignotant')
mon deuxième mot est celui ci ?
var obj = document.getElementById('clignotant');
var obj = document.getElementById('clignotant1');
if (obj.style.opacity >= 0.96){
signe = -1;
MERCI
elgazar
Messages postés
5841
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
17 mars 2021
1 322
1 févr. 2015 à 23:00
1 févr. 2015 à 23:00
j'ai du mal expliquer, chaque mot qui doit clignoter doit avoir un id different par exemple
ensuite tu rajoutes la ligne getelementbyid correspondant au second id dans le script
<span id="clignotant">ici ton mot qui clignote</span>
<span id="clignotant1">second mot qui clignote</span>
ensuite tu rajoutes la ligne getelementbyid correspondant au second id dans le script
<script type="text/javascript">
var signe = -1;
var clignotementFading = function(){
var obj = document.getElementById('clignotant');
var obj = document.getElementById('clignotant1');
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, 45 );
</script>
Merci à tous les deux, je vais suivre vos conseils: un seul clignotement d'autant plus que la note de performance de google n'est pas à 100%
Merci beaucoup pour votre aide
Merci beaucoup pour votre aide
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
elgazar
Messages postés
5841
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
17 mars 2021
1 322
Modifié par elgazar le 2/02/2015 à 10:15
Modifié par elgazar le 2/02/2015 à 10:15
sinon il y a la la possibilité (que je ne connaissais pas avant) de mettre le clignotant directement sur la class ce qui simplifiera le code et la mise en place. Chaque fois que tu voudras mettre un mot clignotant, il suffira de l'entourer de la class cligno
tu as même la possibilité de décaler le clignotement et de commencer par un mot visible ou invisible (mais je te déconseille d'utiliser cette fonction)
Normalement cela fonctionne sur tous les navigateurs sauf ie9 et inferieur
le javascript
<script>
var oBlink = null;
function cligno(){
// recup des éléments si pas encore fait
oBlink = oBlink || document.getElementsByClassName("cligno");
var i, nbr= oBlink.length;
for( i=0; i < nbr; i++){
// change visibility suivant le cas
oBlink[i].style.visibility = oBlink[i].style.visibility == 'hidden' ? 'visible' : 'hidden';
}
}
var timer=setInterval( cligno, 800);
</script>
le html
<span class="cligno" >EN HAUT</span><br>
<span class="cligno">au milieu</span>
tu as même la possibilité de décaler le clignotement et de commencer par un mot visible ou invisible (mais je te déconseille d'utiliser cette fonction)
<span class="cligno" style="visibility:hidden">EN HAUT</span>
<span class="cligno">au milieu</span>
Normalement cela fonctionne sur tous les navigateurs sauf ie9 et inferieur
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 2/02/2015 à 04:32
Modifié par animostab le 2/02/2015 à 04:32
Bonjour
il y a un moyen plus simple de faire clignoter un mot sans utiliser javascript
le css
2s représente 2 secondes pour chaque clignotement mais comme le dit elgazar faire clignoter du texte c'est a utiliser avec beaucoup de parcimonie
pense que c'est le code de base il faut aussi le faire avec les prefixes vendeur
http://webdesign.igorlaszlo.com/blog/prefixes-vendeurs-css3/
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
il y a un moyen plus simple de faire clignoter un mot sans utiliser javascript
<span class="clignote">texte qui clignote</span>
<span class="clignote">autre texte qui clignote</span>
le css
@keyframes fadeinout {
from { opacity: 0; }
50% { opacity: 1;}
to { opacity: 0; }
}
.blink {
animation: fadeinout 2s infinite;
}
2s représente 2 secondes pour chaque clignotement mais comme le dit elgazar faire clignoter du texte c'est a utiliser avec beaucoup de parcimonie
pense que c'est le code de base il faut aussi le faire avec les prefixes vendeur
http://webdesign.igorlaszlo.com/blog/prefixes-vendeurs-css3/
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
