Intégrer des animations dans WordPress avec Animate.css

N'avez-vous jamais eu envie de donner un peu de style à votre blog ou a votre site WordPress ? Cependant, vous vous rendez-compte que votre thème est génial sur pas mal de points mais qu'il ne vous permet pas d'animer vos textes ou vos images comme vous le souhaiteriez ? Je vous propose alors de découvrir la bibliothèque Animate.css qui vous donnera une multitude de possibilités en terme d'actions et d'animations.

Comment utiliser ANIMATE CSS ?

Vous allez voir qu'il n'y a rien de plus facile que d'animer votre site web… Voyons ensemble deux méthodes différentes et simples pour parvenir au même résultat : la méthode manuelle et la méthode au moyen d'un plugin.

Méthode 1 : intégrer Animate.css manuellement

Étape 1 : Création de votre thème enfant.

Si votre site n'utilise pas encore de thème enfant, je vous conseille tout d'abord d'en créer un avant de commencer toutes autres choses… Si vous n'avez jamais fait cela, je vous propose de lire cet article dédié ou bien d'utiliser un plugin gratuit tel que Child Thème Configurator par exemple.  

Etape 2 : Tester la bibliothèque ANIMATE CSS

Rendez-vous sur le site de animate.css où vous pourrez facilement tester les différents types d'animations que propose cette bibliothèque. Il vous suffira alors de cliquer sur le nom d’une animation, dans la liste du site, pour voir le rendu visuel.

Etape 3 : Télécharger la bibliothèque ANIMATE CSS

Toujours sur le site de animate.css, ouvrez ensuite le fichier animate.min.css (version 4.1.1) indiqué par sa documentation : un nouvel onglet s’ouvrira dans votre navigateur et vous n’aurez plus qu’à copier l’ensemble pour le coller ensuite dans un fichier que vous nommerez animate.css. Pour cela, vous aurez besoin d'un éditeur de texte tel que Sublim Text par exemple.  

Etape 4 : Intégrer la bibliothèque Animate.css à votre thème enfant

Maintenant que vous avez créé votre thème enfant et votre fichier CSS, vous devrez établir une connexion entre les deux. Pour cela, il suffira de rajouter une ligne de code dans votre fichier functions.php qui fera appel à votre fichier animate.css (voir ligne 7 de la capture d'écran ci-dessous). Attention de ne pas oublier d'envoyer votre fichier animate.css dans le dossier de votre thème enfant via FTP. À présent, votre thème enfant doit être composé au minimum de 3 fichiers : le fichier FUNCTIONS.PHP, le fichier STYLE.CSS et le fichier ANIMATE.CSS  

Étape 5 : Comment appliquer les animations sur WordPress ?

Dans votre page ou votre article, sélectionnez le bloc à animer (titre, paragraphe, image), ouvrez ses réglages, section Avancé, et saisissez les classes dans le champ "Classe(s) CSS additionnelle(s)", séparées par une espace (la capture ci-dessous montre l’ancien éditeur classique, où l’on passait par l’onglet Texte). Les animations fonctionnent partout : sur les balises de titres, de paragraphe, d'images etc… Depuis la version 4 d’Animate.css, toutes les classes portent le préfixe animate__ : la capture ci-dessus montre les anciens noms, qui ne fonctionnent plus qu’avec le fichier animate.compat.css de la bibliothèque. Voici ce que vous devrez ajouter à votre balise, par exemple <h2 class="animate__animated animate__bounce"> :

• la classe animate__animated : sans celle-ci, l'animation ne fonctionnera pas. Cette classe lance l'animation uniquement au chargement de la page.
• la classe animate__infinite : celle-ci est facultative et permet de jouer l'animation à l'infini.
• la classe d'animation : comme vous aurez pu la tester sur le site (étape 2), cette classe appliquera l'animation souhaitée sur votre balise. Elle porte elle aussi le préfixe, par exemple animate__bounce.

Voici quelques-unes des nombreuses animations mises à votre disposition par la bibliothèque, à écrire avec le préfixe animate__ (animate__bounce, animate__flash…) :  

Étape 6 : Vérifier le rendu d’animation

Après avoir ajouté des animations du côté de votre administration de WordPress, vous pourrez vous rendre du côté visiteur afin de vérifier si le rendu visuel vous convient.  

Méthode 2 : intégrer Animate.css à l'aide d'un plugin

Concrètement, la méthode manuelle pourrait effrayer certains novices, de ce fait il existe un plugin gratuit qui reprend les animations de la bibliothèque de Daniel Eden : il s'agit de l'extension ANIMATE IT, développée par eLEOPARD Design Studios, que vous pourrez retrouver dans le catalogue des plugins officiels de WordPress. Grâce à cette extension, vous pourrez effectuer exactement les mêmes animations que l'on trouve dans la méthode manuelle mais, en plus, vous pourrez aisément affecter des conditions à vos animations telles que la durée, le délai avant la première apparition, l'animation du hover ou lors du scroll etc… Tout cela est également aussi possible en version manuelle mais c’est peut-être un peu plus complexe à réaliser (sauf si vous vous aidez du générateur de classe : voir chapitre "Bonus"). Ce plugin vous facilitera donc la vie !

Étape 1 : installer le plugin

Comme tout plugin, rendez-vous dans le back-office de votre site WordPress afin d’y ajouter le plugin Animate It! et de l’activer. Ensuite, vous le trouverez dans l’onglet REGLAGES > ANIMATE IT! : ici, vous n’aurez pas grands choses à paramétrer…  

Étape 2 : insérer un shortcode pour animer votre contenu

En effet, ce n’est pas vraiment dans les réglages du plugin que vous aurez à intervenir mais plutôt au sein de vos pages et de vos articles. Avec l’éditeur de blocs, ajoutez le bloc Animate It!, réglez l’animation dans les réglages du bloc, puis placez vos blocs à l’intérieur. Avec l’éditeur classique, procédez ainsi :

1. Cliquez sur l’icône Animate It dans l’onglet visuel de votre article ou de votre page. Une fenêtre apparaitra alors…
2. Définissez votre animation en fonction de l’entrée (ENTRY), de la sortie (EXIT), du type d’animation (exemple FADEIN), du délai d’apparition (DELAY), de la durée (DURATION) et de sa façon de se comporter (linear, easeIn etc…).
3. Testez votre animation en cliquant sur ANIMATE IT : vous verrez alors l’icône avec la "baguette magique" reproduire l’animation que vous venez de créer.
4. Insérez le shortcode, quand vous aurez trouvé l’animation idéale, en cliquant sur INSERT.
5. Déplacez ou créez ensuite votre contenu à l’intérieur du shortcode ainsi généré.

Étape 3 : vérifier le rendu visuel

Une fois que vous aurez généré votre shortcode et que vous l’aurez appliqué à votre contenu, n’oubliez pas de mettre à jour votre post et de vous rendre du côté visiteur de votre site afin de vérifier si le rendu final est à la hauteur de vos espérances. Voici une vidéo qui survolera l’étendue des animations que que vous serez en mesure de réaliser avec ce fameux plugin : https://youtu.be/Np_t43pfrh4  

Bonus : une astuce valable pour les deux solutions !

Cette petite astuce va vous plaire puisqu’elle est utilisable aussi bien pour la méthode manuelle que celle avec plugin : il s’agit d’un générateur des classes d’animation. C’est à dire que ce générateur vous fournira immédiatement la classe avec les paramètres prédéfinis. Les avantages ? Pas de shortcode à utiliser, seulement une série de classes à appliquer sans se creuser la tête pour les imbriquer ensemble.  

En conclusion

La bibliothèque d’animation Animate.css pourrait certainement vous aider à ajouter un peu de "fun" dans votre site… Mais attention à l’utiliser avec parcimonie et à bon escient car vous risqueriez de vite fatiguer vos lecteurs !