Retour au blog

Créer des animations typographiques en JS / CSS

La typographie est un élément essentiel de la charte graphique d’un site web. Jouer sur les graisses, la casse, les tailles, les couleurs ou l’interlettrage permet de composer des pages dynamiques tout en hiérarchisant les contenus. Mais la cerise sur la gâteau est la possibilité d’animer les textes.

Pourquoi animer vos textes ?

Lorsqu’on crée un site web, il est toujours important de faire la différence entre ce que l’on peut faire et ce que l’on doit faire. La technologie a repoussé les limites de la créativité. Néanmoins, la simplicité et la rapidité d’affichage prime en règle générale. Ainsi, animer des textes n’est pas forcément une bonne idée si ce sont de longs paragraphes. Mieux vaut se concentrer sur les titres, les phrases en exergue et les éléments interactifs comme les liens ou les boutons.

Voici trois bonnes raisons d’ajouter des animations à du texte :

  • Attirer le regard sur une partie spécifique de votre design ou dynamiser l’expérience utilisateur en lançant une animation. Ex : au scroll dans la page.
  • Donner du feedback à l’utilisateur lorsqu’il réalise une action (survol d’un lien, clic sur un bouton…) ou patiente (texte affiché pendant un chargement).
  • Donner vie à votre site sans sacrifier les performances. En effet, contrairement à l’animation d’images particulièrement lourde, l’animation de textes ne nécessite que très peu de travail pour votre ordinateur. Les caractères HTML sont très légers dans le poids d’une page. Il est simple de garder des animations parfaitement fluides, si l’on n’en abuse pas. 

Pré-requis pour animer les lettres de façon indépendante

Pour pouvoir animer les caractères de vos mots de façon précise, il va falloir traiter chaque caractère de façon indépendante. La solution est de mettre chaque caractère dans une balise <span>. Si l’on veut être capable de gérer des textes sur plusieurs lignes, il faudra savoir où commencent et s’arrêtent les mots. Nous allons donc définir des <span> de niveau 1 contenant un ensemble de <span> de niveau 2 (chacun d’eux contenant un caractère).

Si vous pouvez le faire manuellement et rapidement pour un mot court, cela devient très fastidieux pour une phrase complète. Et si vous devez laisser la main au client sur ce contenu, il est évident qu’il faut dynamiser le processus côté front. 

Vous pouvez le faire en Javascript pur ou en jQuery. 

En jQuery :

$(".split-character").each(function (index) {
    // on récupère tous les caractères dans un tableau
    var characters = $(this).text().split("");
    // on initialise la variable qui va contenir le nouveau contenu en ouvrant le span qui contiendra le premier mot
    var newContent = "";
    // pour chaque caractère existant dans cet objet
    $.each(characters, function (i, el) {
        // si c'est un caractère on le met dans un span
        if(el != " ") {
          newContent += "" + el + "";
        } 
        // si c'est un espace vide c'est la fin d'un mot, on ferme le span qui englobe ce mot et on ouvre le span du mot suivant (tout en gardant l'espace)
        else {
            newContent += " ";
        }
    });
    // on ferme le span du dernier mot
    newContent += ""
    // on remplace le contenu actuel par notre nouveau contenu
    $(this).html(newContent);
});

Dans notre exemple, nous avons appliqué une classe “split-character” aux phrases devant être traitées. Pour mettre chaque caractère dans des spans, voici la fonction jQuery. 

Ici, nous récupérons le contenu de chaque balise ayant la classe “split-character”. Nous englobons ensuite chaque caractère dans des <span> ainsi que chaque mot complet (ensemble de <span>) dans un <span> parent. Nous incrémentons la variable newContent avec tout ce nouveau contenu balisé. Lorsqu’enfin tous les caractères sont traités, nous remplaçons l’ancien contenu par le nouveau.

Pour faire la même chose en pur Javascript, c’est un peu plus long mais tout aussi fonctionnel : 

(function() {
    var elements, newContent = "";
    // on stock tous les objets du DOM ayant la classe "split-character" dans un tableau "elements"
    elements = document.getElementsByClassName('split-character'); 
    // pour chaque objet du DOM ayant la classe "split-character"
    for (var element = 0; element < elements.length; ++element) { 
        // on initialise la variable qui va contenir le nouveau contenu en ouvrant le span qui contiendra le premier mot
        newContent += ""
        // pour chaque caractère existant dans cet objet
        for (var character = 0; character < elements[element].innerText.length; character++) {
            // si c'est un caractère on le met dans un span
            if (elements[element].innerText[character] !== " ") { 
                newContent += ""+ elements[element].innerText[character] +"";
            }
            // si c'est un espace vide c'est la fin d'un mot, on ferme le span qui englobe ce mot et on ouvre le span du mot suivant (tout en gardant l'espace)
            else { 
                newContent += " ";
            }
        }
        // on ferme le span du dernier mot
        newContent += ""
        // on remplace le contenu actuel par notre nouveau contenu
        elements[element].innerHTML = newContent; 
        // on réinitialise la variable newContent puisqu'elle va accueillir le contenu de l'objet suivant dans la boucle
        newContent = ""; 
    } 
})(); 

Ici, nous allons créer un tableau “elements” contenant tous les objets du DOM et ayant la classe “split-character”. Pour chacun de ces objets, nous calculons le nombre de caractères qu’ils contiennent (innerText.length). Ensuite, par itération, nous plaçons chacun des caractères dans des balises <span>. Nous les stockons dans la variable newContent.

Une nouvelle fois, nous prenons soin de conserver les espaces et la délimitation des mots. Une fois que tous les caractères d’un objet sont traités, nous remplaçons le contenu initial de l’objet par notre nouveau contenu (newContent). Nous le réinitialisons finalement avant de traiter l’objet suivant.

Créer des animations textuelles en JS / CSS

Le code a été mis en place. Tous les éléments à animer ayant la classe “split-character” doivent contenir un ensemble de <span> englobant un seul caractère à chaque fois. Nous pouvons ainsi animer ces <span> comme bon nous semble.

Exemple 1 : apparition dynamique d’un titre de bas en haut

Dans cet exemple, nous allons faire apparaître successivement les lettres en jouant sur la translation sur l’axe Y et l’opacité. Initialement, les lettres ont une opacité de 0 et sont décalées de 100% de leur hauteur. A la fin de notre animation, les lettres ont une opacité de 1 et sont à leur position correcte (la valeur de translation sur l’axe Y est donc à 0). Nous appliquons l’animation sur notre titre avec une vitesse et un type de transition qui nous conviennent. 

Cependant, si nous ne faisions qu’appliquer l’animation de cette façon, toutes les lettres apparaîtraient en même temps. Nous voulons dynamiser notre exemple et nous allons intégrer la notion de délai entre chaque lettre. Grâce à notre boucle for traitant les lettres en JS, nous allons ajouter un délai de 0.035s (35 millisecondes) entre la lecture de l’animation de chaque lettre. Le rendu est beaucoup plus intéressant.

See the Pen Animated title (appearance from bottom) by Novaway (@Novaway) on CodePen.


Exemple 2 : apparition dynamique d’un titre avec effet de symétrie

Cet exemple est tout aussi simple que le précédent. Cette fois nous allons jouer sur la symétrie autour de l’axe horizontal pour faire apparaître les lettres. Pour cela, il suffit de passer la valeur du scale X de -1 à 1. Couplé à l’opacité allant de 0 à 1, le résultat est très dynamique.

See the Pen Animated title playing with symmetry by Novaway (@Novaway) on CodePen.


Exemple 3 : animation au passage sur un bouton

Voici maintenant un exemple un peu plus complexe dans la mesure où il combine deux animations. Nous allons animer notre texte au hover du bouton. Dans un premier temps, les lettres disparaissent une à une vers le haut. Puis, dans un second temps, elles reviennent à leur état initial en apparaissant depuis le bas.

Nous devons donc indiquer deux délais d’animation sur chaque lettre : 

  • le premier de 0.035s entre chaque lettre (lorsque les lettres disparaissent vers le haut)
  • le second de 0.035s entre chaque lettre mais auquel nous rajoutons 1s, puisque la seconde animation ne doit se jouer qu’une fois la première terminée.

See the Pen Animated letters on button hover by Novaway (@Novaway) on CodePen.

Soyez créatif !

Les différents exemples ci-dessus sont volontairement simples afin de vous donner les bases pour animer du texte dans votre site web. Vous pouvez, bien sûr, aller beaucoup plus loin en laissant libre cours à votre imagination. A partir du moment où chaque caractère est dans un span, les possibilités sont quasiment illimitées. 

Gardez bien à l’esprit qu’à trop vouloir animer un site, on peut rapidement détériorer ses performances et réduire sa compréhension. Il vous faudra donc trouver le juste milieu.