Inclure des animations en CSS (Animate.css)

par **Bipo** Lun 4 Sep 2023 - 21:55

Inclure des animations en CSS (Animate.css)

Animate.css (développé par Daniel Eden, Elton Mesquita et Waren Gonzada) propose un ensemble d'animations amusantes et multi-navigateurs en CSS que vous pouvez utiliser afin de personnaliser vos forums Forumactif.

Installation d'Animate.css

L'installation d'Animate.css est possible par deux méthodes. La première requiert l'accès aux templates et donc d'être le fondateur du forum, la deuxième se fait par ajout d'un code javascript et est accessible à tous les administrateurs.

Méthode 1 : Installation par les templates

	La modification des templates n'est pas une opération à prendre à la légère. Elle requiert, au minimum, de bonnes connaissances du langage HTML. En outre, seul le fondateur du forum est habilité à en modifier les templates.

Panneau d'administration  Affichage  Templates - Général

Editez le template overall_header en cliquant sur l'icône edit

face au template correspondant.

Repérez la ligne contenant la variable {CSS} ;
Ajoutez la ligne de code ci-dessous après la variable {CSS} :
Code:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css/animate.min.css">
Voir illustration :

N’oubliez pas de publier le template en cliquant sur Ajout

.

Méthode 2 : Installation par javascript

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Animate.css" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

Code:: $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css/animate.min.css">');

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Application d'effets sur les éléments du forum

Animate.css propose pas loin de 100 animations que vous pouvez appliquer sur votre forum. Vous pouvez visionner un aperçu des animations directement sur la page ci-dessous :

Inclure des animations en CSS (Animate.css) Image82

Voir illustration :

Démonstration

N'étant pas possible de faire une liste exhaustive de toutes les possibilités, nous vous proposons quelques exemples que vous pourriez appliquer à vos forums Forumactif.

Ajouter une animation à partir de la classe d'un élément

Il est possible d'ajouter une animation à partir de la classe d'un élément :

Code:: animate__animated animate__[nom_animation]

La variable animate__animated animate__[nom_animation] est composée de deux parties : une première animate__animated animate__ qui doit rester toujours la même quel que soit l'animation désirée et, la seconde, [nom_animation] qui doit reprendre le nom de l'effet que vous pouvez retrouver dans le menu de droite sur le site Animate.css.

Pour montrer ce fonctionnement, nous vous proposons d'ajouter un effet de transition au chargement d'une page sur votre forum.

Panneau d'administration  Affichage  Templates - Général

Editez le template overall_header en cliquant sur l'icône edit

face au template correspondant.

Repérez la ligne contenant la balise HTML <body> ;
Dans cet exemple, nous allons ajouter l'animation fadeIn sur le chargement des pages d'un forum. Pour cela, il nous suffit d'ajouter une classe CSS à la balise HTML <body> :
Code:
<body class="animate__animated animate__fadeIn">
Voir illustration :

N’oubliez pas de publier le template en cliquant sur Ajout

.

Voir illustration :

Ajouter une animation à partir de la feuille de style CSS

Il est possible d'ajouter une animation à un élément comportant une classe existante, depuis la feuille de style CSS de votre forum.

Panneau d'administration  Affichage  Images et Couleurs - Couleurs & CSS, Feuille de style CSS

Code:: .mon-élément { animation: bounce; /* Fait référence au choix de l'animation (voir la liste sur Animate.style) */ animation-duration: 2s; /* Mettre obligatoirement une durée ! */ }

Pour montrer ce fonctionnement, nous vous proposons d'ajouter un effet sur le bouton permettant d'écrire un nouveau message privé (version ModernBB).

Panneau d'administration  Affichage  Images et Couleurs - Couleurs & CSS, Feuille de style CSS

Code:: .button-round { animation: heartBeat; /* Fait référence au choix de l'animation (voir la liste sur Animate.style) */ animation-duration: 2s; /* Mettre obligatoirement une durée ! */ }

N'oubliez pas de cliquer sur le bouton Valider afin d'enregistrer vos modifications.

Voir illustration :

Conseils et documentation technique

Le but des animations

Vous devez éviter d'animer un élément pour le simple plaisir de le faire. Gardez à l'esprit que les animations doivent exprimer clairement une intention. Les animations telles que celles qui attirent l'attention (rebond, flash, impulsion, etc.) doivent être utilisées pour attirer l'attention de l'utilisateur sur quelque chose de spécial dans votre interface et pas seulement pour lui donner un aspect "tape-à-l'œil". Les animations doivent être utilisées pour orienter l'utilisateur sur les différents fonctions présentes sur une page. Cela ne signifie pas qu'il faille éviter d'ajouter un aspect ludique à la page, mais il faut veiller à ce que les animations ne gênent pas l'utilisateur et que les performances de la page ne soient pas affectées par une utilisation exagérée des animations.

Les erreurs à ne pas commettre

Ne pas animer les éléments racines

Animer l'élément </html> et </body> est possible, mais vous devriez l'éviter. Certains rapports indiquent que cela pourrait déclencher des bugs étranges dans les navigateurs. En outre, faire rebondir toute la page n'apporterait pas grand-chose à l'interface utilisateur. Si vous avez besoin de ce type d'effet, intégrez votre page dans un élément et animez-la, comme ceci :

Code:: <body> <div class="animate__animated animate__fadeInLeft">  </div> </body>

Ne pas animer un élément de manière infinie

Même si Animate.css fournit des classes utilitaires pour répéter des animations, y compris une animation infinie, vous devriez éviter les animations sans fin. Elles ne feront que distraire vos utilisateurs et risquent d'en ennuyer une bonne partie. Utilisez-les donc avec discernement.

Ne pas désactiver l'option "prefers-reduced-motion"

Depuis la version 3.7.0, Animate.css prend en charge prefers-reduced-motion, la requête média qui désactive les animations en fonction de la préférence du système d'exploitation pour les navigateurs (la plupart des navigateurs actuels la prennent en charge). Il s'agit d'une fonctionnalité d'accessibilité essentielle qui ne doit jamais être désactivée ! Elle est intégrée aux navigateurs pour aider les personnes souffrant de troubles vestibulaires et de crises d'épilepsie. Pour en savoir plus, cliquez ici. Si votre site web a besoin d'animations pour fonctionner, prévenez les utilisateurs, mais ne désactivez pas la fonction.

La documentation technique

Pour une personnalisation plus complète à destination des utilisateurs les plus expérimentés, vous pouvez consulter la documentation technique.