Textillate.js, un plugin jQuery pour animer vos textes avec CSS3

Textillate.js est un plugin jQuery qui permet de réaliser facilement toutes sortes d’animations CSS3 sur du texte : les lettres se décrochent, tremblent, roulent, rebondissent, tournent… Bref, des lettres en mouvement ! A noter qu’il est possible d’animer chaque lettre distinctement ou de façon synchronisée.

De multiples animations…

Le script utilise deux librairies puissantes qu’il combine pour créer un rendu optimal : Animate.css, feuille de style contenant de courtes animations CSS3, et Lettering.js, plugin jQuery qui permet de styliser précisément la typographie. Les animations sont configurables aussi bien en entrée qu’en sortie grâce à une dizaine de paramètres et une trentaine d’effets (fade, flip, bounce, rotate, etc).

textilatte_jquery

Le plugin est totalement personnalisable : durée d’animation, temps d’attente avec l’exécution, démarrage automatique, possibilité de faire tourner en boucle l’animation, etc. Par défaut, le script anime les lettres une par une et de façon ordonnée, mais il est possible de les synchroniser en passant le paramètre sync à true, ou de les animer de façon aléatoire sans respecter l’ordre des lettres, grâce au paramètre shuffle.

Installation du plugin

On commence par inclure les dépendances du plugin : le framework jQuery, la feuille de style Animate.css et le plugin Lettering.js. On ajoute Textillate.js :

<link href="css/animate.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.lettering.js"></script>
<script src="js/jquery.textillate.js"></script>

Ensuite, on définit une classe CSS sur l’élément HTML qui contient le texte que l’on veut animer.

<h1 class="tlt">My Title</h1>

Puis on fait appel à Textillate.js de la manière suivante. C’est terminé ! Votre texte est animé en utilisant les options par défaut.

$(function () {
    $('.tlt').textillate();
})

Paramétrage des options

Pour modifier les paramètres par défaut, vous pouvez le faire de deux manières. Soit vous passez directement par la structure via les attributs data-* de HTML5 :

<h1 class="tlt" data-in-effect="rollIn">Tittle</h1>

Soit comme n’importe quel plugin jQuery, c’est-à-dire via les paramètres lors de l’appel de Textillate.js. Ici, on redéfinit l’effet d’animation en entrée avec la valeur rollIn qui permet de faire « rouler » les lettres :

$('.tlt').textillate({ in: { effect: 'rollIn' } });

La possibilité de configurer Textillate.js directement dans le HTML est très intéressante car elle donne la possibilité d’animer une liste de textes différemment avec un seul appel jQuery. Il faut tout de même penser à ajouter une classe CSS texts qui correspond au paramètre selector sur l’élément conteneur des textes :

<h1 class="tlt">
    <ul class="texts">
        <li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li>   
        <li data-in-effect="fadeIn">Another Title</li>
    </ul>
</h1>
$('.tlt').textillate();

Pour conclure, Textillate.js est un plugin jQuery idéal pour animer vos textes en proposant des animations fluides via CSS3. Le script est assez complet et propose une jolie gamme d’effets de transition qui agrémentera vos pages. Amusez-vous !

Requis : jQuery, Animate.css, Lettering.js
Compatibilité : Navigateurs modernes
Démonstration : http://jschr.github.com/textillate/
Licence : MIT

Commentaires

  • webaueh

    itih Recently I was lacking in $$ and debits were killing me from all sides! that was Until i decided to generate money on the INTERNET. I landed on surveymoneymaker period net, and started filling in surveys for straight cash, and yes, I have been great amounts more able to pay my bills!! i am very glad, that i did this! With all the financial stress these years, I really hope all of you will give it a chance. – 7Q4D

  • Patr

    ou dois je mettre tout ces bout de code?

  • Johan Chaffanjon

    Salut ! je n’arrive pas à faire répéter mon animation. pourtant j’ai bien mis loop:true, mais ça ne fait pas le « out ». Je boss sur un thélia 2. Cordialement.