webdevpro.net

L’objectif de cet article est de donner un petit script Javascript pour animer l’apparition d’un texte, par exemple un titre, lettre par lettre :

Texte à animer

 <p id="hello" data-label="Texte à afficher lettre par lettre"></p> 

Script d’animation

const htmlP = document.getElementById("hello");
const txt = htmlP.dataset.label;
let i 	= 0 ;
function showLetters()
{
  let timeOut ;
  if(i < txt.length)
	{
	  htmlP.innerHTML += `<span>${txt[i]}</span>` ;
	  timeOut = setTimeout(showLetters,200)
	  i++
	}
	else
	{
	  clearTimeout(timeOut);
	  console.log("end")
	}
}
showLetters();