Faire clignoter un texte

Résolu

finette35 -
elgazar Messages postés 5841 Date d'inscription Statut Membre Dernière intervention - 2 févr. 2015 à 10:14

Bonjour,
J'aurai encore une petite question à poser à Elgazar concernant le script que tu m'a donné hier pour faire clignoter un mot. Cela fonctionne bien avec un mot et si je veux faire clignoter un deuxième mot non justaposé dans le même article cela ne fonctionne pas pour le deuxième mot.
Ce script est uniquement valable pour un seul ou bien faut il rajouté du code pour faire clignoter un deuxième mot ?
Merci beaucoup

Afficher la suite

A voir également:

Texte clignotant
Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
Transcription audio en texte word gratuit - Guide
Excel cellule couleur si condition texte - Guide
Texte barré whatsapp - Guide
Mettre un texte en majuscule - Guide

6 réponses

Réponse 1 / 6

elgazar Messages postés 5841 Date d'inscription Statut Membre Dernière intervention 1 326

Pour ajouter un second mot, il faut juste changer l'id du span par exemple

<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

Réponse 2 / 6

finette35

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

Réponse 3 / 6

elgazar Messages postés 5841 Date d'inscription Statut Membre Dernière intervention 1 326

j'ai du mal expliquer, chaque mot qui doit clignoter doit avoir un id different par exemple

<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>

Réponse 4 / 6

finette35

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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

elgazar Messages postés 5841 Date d'inscription Statut Membre Dernière intervention 1 326

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


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

Réponse 6 / 6

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

Bonjour
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.

Discussions similaires

Formule Excel : "SI" une cellule contient un mot, alors ?

Excel formule : savoir si une cellule contient partie texte

[Excel] Recherche de Texte avec RechercheV

Votre réponse

Discussions similaires