Effet machine à écrire

Un effet souvent utilisé en animation de texte, c’est comme si le texte était tapé à la machine à écrire ou sur un logiciel de traitement de texte. Cela donne un peu de mouvement sur les grands titres et donne ainsi de l’importance, en plus sans abuser, ça rajoute un peu de temps passé au lecteur sur votre page.

Animer le curseur

Comme tous les logiciels de traitement de textes qui se respecte, il est composé d’un curseur clignotant permettant de connaitre la position sur laquelle écrire son texte.
C’est très simple à animer en CSS il suffit de faire un :after qui va apparaitre et disparaitre à l’infinie.

En CSS :

#text:after{ 
     content: ""; 
     width: 3px; 
     height: 3rem; 
     display: inline-block;      
     background: rgb(14, 15, 22);
     animation: clignote 0.7s infinite linear;
    }    

@keyframes clignote {
 from{ 
       opacity: 0; 
     }      
 to{ 
       opacity: 1;
      }    
}

Animer les lettres

C’est ici que nous avons besoin de JavaScript, en effet il faut pourvoir décomposer notre phrase lettre par lettre.
En JavaScript il existe une fonction nommée split() qui fait tout le travail, il découpe une chaine de caractère et retourne un tableau avec tous les caractères séparés.

En JavaScript :
On appelle un texte auquel, par exemple, un id="text » est appliqué.

var text = document.getElementById('text');
var splitText = text.innerText.split('');

Pour cet exemple, nous utilisons innerText, car nous souhaitons que les espaces de la phrase soit ajouter dans le tableau splitText. Dans la fonction, ilsplit faut un argument pour lui indiquer comment ou appliqué la séparation, dans l’exemple, je demande juste de séparé chaque caractère.

L’idée maintenant que toutes les lettres sont dans un tableau, c’est de les afficher une par une avec un petit temps entre chaque affichage.

text.innerHTML = '';
i = 0;
setInterval(function(){    AjoutDeLettre()}    , 100 );
function AjoutDeLettre(){
  if(i < splitText.length){
    text.innerHTML += splitText[i];
    i++;
  }
}

Pour aller plus Loin

L’exemple ci-dessus donne les bases pour ce type d’effet, mais plusieurs pistes d’amélioration peuvent être envisagées, comme rajouté un son de touche de clavier.
On peut aussi imaginer complexifié un peu l’animation avec des erreurs de frappe et des retours en arrière.
Une animation souvent utilisée avec cet effet, c’est d’affiché un mot, simuler l’effacement total et la réécriture d’un autre mot.