Discussion :

[olivierdauxais]

Bonjour,

Ma question n'est peut-être pas dans la bonne rubrique. php? Html5? CSS3? Javascript?

J'aimerai avoir le sous-titre de mon site qui change tous les 2 ou 3 secondes en boucle pour mettre en avant les points forts de mon site. Un peu comme un diaporama de photo sauf que c'est du simple texte et donc beaucoup moins lourd qu'une animation gif ou un vrai diaporama déroulant.

J'aimerai que les mots suivants apparaissent et soient remplacés par les suivants après 2 ou 3 secondes.
Exemple:
"Rapide" pendant 2 secondes puis...
"Beau" pendant 2 autres secondes puis...
"Puissant" pendant 2 autres secondes puis...
"Majestueux" pendant 2 autres secondes puis... Retour au premier mot "Rapide".
Ainsi de suite... Afin que ça tourne en boucle...

Comment faire? Avez-vous une idée?
Est-ce possible d'avoir un élément <h2>'.$variable.'</h2> dont le contenu évolue avec le temps ???

Cordialement.

[danielhagnoul]

Exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<h2 id="titreAModifier">Hello!</h2>

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.addEventListener( 'load', function( ev ){
 
  let
    titres = [ "Rapide", "Beau", "Puissant", "Majestueux" ],
    nodeTitreAModifier = document.querySelector( "#titreAModifier" ),
    i = 0,
    changeTitre = function(){
 
      // debug
      // console.log( i );
 
      ( i < titres.length ) ?
      ( nodeTitreAModifier.textContent = titres[i++] ) :
      ( i = 0, nodeTitreAModifier.textContent = titres[i++] );
 
      setTimeout( changeTitre, 2000 );
    };
 
  changeTitre();
 
}, false );

[olivierdauxais]

Merci beaucoup, danielhagnoul, pour ce bout de code.
Je vais essayer et je vous tiendrais au courant.

Pour les vieux Smartphones ou navigateurs qui ne lisent pas javascript, y aurait'il un autre moyen simple et peu lourd d'avoir un titre qui change avec le temps et qui tourne en boucle ???

[olivierdauxais]

Re-bonjour danielhagnoul,

Super, votre bout de code marche impeccable. Il est maintenant en ligne sur mon site. C'est génial.

Puisque j'appose ce javascript sur un fichier php et non html, il m'a juste fallu remplacer le 'load' par "load" pour éviter un PARSE ERROR.

J'ai toutefois une dernière petite question:
A la fin du script, vous avez mis un "false". Si je l'enlève, je constate que cela marche encore très bien.
Serait-ce une bêtise de ma part d'enlever ce "false"?

Excusez ma manie d'enlever un max de truc. Mon mode de pensée est conforme à ce que disait St Exupéry:
"La perfection est atteinte non quand il ne reste rien à ajouter mais quand il ne reste rien à enlever."

Encore un grand merci pour votre aide.

[danielhagnoul]

Bonsoir

A la fin du script, vous avez mis un "false". Si je l'enlève, je constate que cela marche encore très bien.
Serait-ce une bêtise de ma part d'enlever ce "false"?

Non, car la valeur du paramètre "useCapture" est "false" par défaut. Voir : https://developer.mozilla.org/fr/doc...dEventListener

[olivierdauxais]

Merci pour votre réponse.

A part ça, auriez vous une idée du pourcentage d'internautes qui ne sont pas équipés pour lire javascript?

Moi, par exemple, pas de problème sur mon ordi mais mon smartphone (un vieux Samsung style BlackBerry) ne lit pas le javascript.