Dans Webdesign
Les librairies d’animation web sont de véritables mines d’or pour les webdesigners et les développeurs qui souhaitent créer des interfaces dynamiques et modernes, tout en proposant une expérience utilisateur vraiment unique.
Qu’il s’agisse d’animations CSS ou JavaScript, les possibilités sont nombreuses sur internet : voici donc une sélection de bibliothèques qui proposent une grande variétés d’effets et de styles.
AnimatiSS propose une collection complète d'animations CSS, comprenant des effets de mise à l'échelle, de rotation, de balancement, de glissement, d'ombre, de suivi entrant/sortant, de flou, et bien plus encore, le tout avec une interface simple et conviviale.
AnimXYZ vous aide à créer, personnaliser et composer des animations pour votre site web. Alimenté par des variables CSS pour permettre un nombre presque illimité d'animations uniques sans écrire une seule keyframe. Gagnez du temps et ayez un contrôle total sur le mouvement de vos éléments.
Izmir est une mini bibliothèque CSS qui vous permet de créer rapidement de magnifiques éléments de survol d'images. Doté d'une multitude de classes de style et de propriétés personnalisées, Izmir vous offre un contrôle total et des possibilités presque illimitées.
Profitez de superbes animations CSS faciles à copier-coller et qui peuvent être facilement personnalisées selon vos préférences. Avec CSS Wand, vous pourrez accélérer votre développement tout en bénéficiant d'une interface utilisateur agréable.
Catto-CSS est une bibliothèque d'animations CSS en ligne qui simplifie le processus d'ajout d'animations à un site web ou une application web. Elle permet aux développeurs d'utiliser le code source sans avoir besoin d'installer des dépendances.
Animatopy est une bibliothèque d'animation CSS qui propose des extraits de code prêts à l'emploi pour tous vos besoins en matière d'animation, ce qui vous évite d'avoir à ajouter l'intégralité du fichier animate.css dans vos projets web.
Vov.css est une bibliothèque CSS dédiée aux petites animations mais utiles. Cet outil propose une collection d'animations CSS compactes mais pratiques pour améliorer l'aspect visuel de votre site web. Cette bibliothèque CSS légère est parfaite pour les développeurs qui souhaitent ajouter des animations sans alourdir leur code.
La bibliothèque Animation library est parfaite pour ajouter des animations à votre projet. Il vous suffit d'ajouter les fichiers CSS ou SCSS à votre projet et d'appliquer une classe d'animation à l'élément que vous souhaitez animer.
Woah.css est une bibliothèque d'animations CSS conçue spécialement pour les développeurs web excentriques. Ces animations sont vraiment extravagantes et peu pratiques, mais elles sont tellement amusantes et spectaculaires qu'elles ne manqueront pas de surprendre vos utilisateurs.
Micron.js est une bibliothèque d'interaction micro construite avec des animations CSS et contrôlée par la puissance de JavaScript. Elle permet d'ajouter facilement une interaction à n'importe quel élément du DOM en utilisant des attributs de données.
Grand classique des librairies d’animation CSS, Animate.css vous permet d’implémenter très facilement une grande variété d’animations pour apporter du dynamisme à tous types d’éléments, et en particulier le texte.
Hover.css permet d’appliquer une myriade d’effets qui s’activent lors du survol d’un élément avec la souris (“hover”) : changement de taille, coloration de l’arrière-plan, mouvement… Vous trouverez forcément ce qu’il vous faut dans cette librairie très fournie.
Magic Animations propose des effets plus travaillés et “expérimentaux” que les précédents outils, avec des mouvements multidirectionnels ou en perspective : des animations résolument modernes qui peuvent apporter un véritable plus à certains de vos projets.
Particulièrement utile pour les sites one-page, Animate on Scroll permet de faire apparaître des éléments (blocs de texte, images, etc.) au fur et à mesure que l’utilisateur fait défiler la page vers le bas. Vous pouvez facilement paramétrer la direction et la vitesse de chaque animation, pour un scrolling agréable et fluide.
Tuesday est une bibliothèques d’animation très riche, qui contient un grand choix d’effets divisés en deux catégories : les entrées et les sorties, qui permettent respectivement de faire apparaître ou disparaître un élément.
Idéale pour les développeurs et webdesigners souhaitant créer des interfaces web dynamiques, la librairie AniJS permet d’animer très simplement un menu, des onglets, ou encore un accordéon.
Anime.js vous permet d’animer à peu près n’importe quoi (HTML, JS, CSS, SVG) et d’ajouter des effets et des mouvements fluides et élégants sur une multitude d’éléments (logo, texte, etc.).
Choreographer-JS est une librairie très simple d’utilisation, mais qui permet de créer tous types d’animations CSS complexes (déplacements, rotations, y compris en perspective, changements de couleur, etc.).
Slick est une bibliothèque d’animations permettant principalement de créer des carrousels et des diaporamas, que vous pouvez personnaliser à votre guise : taille des différents éléments, défilement automatique ou manuel, lazy loading…
Il suffit de faire défiler la page web dédiée à Wow.js pour en prendre plein la vue, avec une myriade d’effets sympathiques et très personnalisables. Cette librairie peut d’ailleurs être utilisée conjointement avec Animate.css, mentionnée plus haut.
Popmotion est un véritable couteau suisse pour les animateurs et les créateurs d’interfaces, avec une multitudes d’effets stylés qui vous permettront de mettre le mouvement au centre de vos designs.
Granim.js est une petite librairie JavaScript qui vous permet de créer très facilement des animations à base de dégradés de couleurs : idéal pour créer des arrière-plans colorés, stylés et dynamiques.
Vivus.js se focalise sur l’animation des SVG. Si vous souhaitez faire apparaître un élément comme s’il était dessiné en temps réel, sous les yeux de l’utilisateur, ce petit outil est exactement ce qu’il vous faut.
Dans le concept web moderne, cssanimation.io est la meilleure bibliothèque de contrôle d'animation pour CSS et Greensock. Pour avancer avec cette bibliothèque, il est nécessaire d'avoir une idée de base sur HTML et CSS3.
Animista est un site où vous pouvez vous amuser avec une collection d'animations CSS. L'idée était de créer une sorte de terrain de jeu où une collection d'animations préfabriquées pouvait être testée et ajustée avant de les utiliser réellement. Voir comment diverses options telles que l'assouplissement, le délai, la durée et d'autres affectent l'animation.
Dynamic.css est une collection impressionnante d'animations CSS compatibles avec tous les navigateurs, à utiliser dans n'importe quel projet. Elle est parfaite pour animer les éléments entrants et sortants d'une page web, mais elle peut également être utile pour les sliders, les gestionnaires :hover et toutes sortes d'utilisations générales.
WickedCSS met à votre disposition une vingtaine d’animations plutôt simples, mais malgré tout très efficaces pour attirer l’œil et apporter du mouvement sur une page web.
