Un titre qui change toutes les deux secondes

Version imprimable

23/07/2016, 20h09
olivierdauxais

Un titre qui change toutes les deux secondes

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.

Exemple :

Code:

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

Code:

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

24/07/2016, 11h15
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 ???
24/07/2016, 18h30
olivierdauxais

Re-bonjour danielhagnoul,

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

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.
24/07/2016, 22h04
danielhagnoul

Bonsoir

Citation:

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
25/07/2016, 18h27
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.