Menu icon Foundation
Text Change Animation for Web

How do achieve an effect similar to that of www.panache.fr in which the text changes automatically

(visionnaires --> bobos --> nouveaux, etc)? A demo in codepen would be helpful.

textchangeanimationpanacheeffectcsshtmljs

How do achieve an effect similar to that of www.panache.fr in which the text changes automatically

(visionnaires --> bobos --> nouveaux, etc)? A demo in codepen would be helpful.

VIncent Kosciuszko over 3 years ago

It's not really hard:

With this html :

<h1>Conseil <br>& création pour les
        <span class="words-list">
            <b class="is-visible">visionnaires</b>
            <b class="is-hidden">agences</b>
            <b class="is-hidden">indépendants</b>
            <b class="is-hidden">passionnés</b>
            <b class="is-hidden">entreprises</b>
            <b class="is-hidden">écureuils</b>
        </span>
    </h1>
// Call this function every 2 sec

window.setInterval(function(){
  // list all hidden word
  var words = document.querySelectorAll(".is-hidden");
  // chose one randomly
  var randomWord = Math.floor(Math.random()*((words.length - 1)+1));
  
  //hide the visible word
  document.querySelector(".is-visible").className = "is-hidden";

  //show the chosen one :) 
  words[randomWord].className = "is-visible";
}, 2000);